Di chuyển (hoặc không) với CSS Motion Path

[ad_1]

    
    

    

    

Với việc phát hành Firefox 72 vào ngày 7 tháng 1 năm 2020, CSS Motion Path hiện đã có trong Firefox, Edge mới (dự kiến ​​phát hành ổn định vào ngày 15 tháng 1 năm 2020), Chrome và Opera (và các trình duyệt dựa trên Blink khác). Điều đó có nghĩa là mỗi trình duyệt này hỗ trợ một đường cơ sở chung của offset-path: path () offset-distance offset-rotation .

Firefox cũng đã phát hành hỗ trợ ổn định cho offset-anchor (hiện đứng sau Nền tảng web thử nghiệm của tính năng cờ cờ trong các trình duyệt dựa trên Blink). Để ăn mừng, hãy để Rà soát lại những điều cơ bản về những gì được hỗ trợ, giải thích một số chi tiết cụ thể khi một đường dẫn được áp dụng, và cũng nêu bật các khả năng của offset-anchor .

   Xem Bút
  Revealer 2020
của Dan Wilson (@danwilson)
  trên CodePen.

Xác định đường dẫn

Về mặt kỹ thuật không có chuyển động nào liên quan khi sử dụng bất kỳ thuộc tính nào được xác định trong đặc tả Đường dẫn chuyển động CSS. Thuộc tính offset-path cho phép bạn thiết lập một đường dẫn vô hình mà một phần tử có thể đi theo.

   # my-Element   {
   offset-path  :   path   (  'M0,0 C40,160 60,160 100,0'  ]); 
}   

Nếu bạn đã quen thuộc với các đường dẫn SVG, hoặc đã khám phá những nơi khác để sử dụng chức năng đường dẫn () như các tùy chọn mới hơn clip-path điều này có vẻ quen thuộc. Bộ sưu tập các chữ cái, số và dấu phẩy này là một cách để xác định các đường thẳng, đường cong vectơ, v.v. Ví dụ trước này tạo một đường cong hình chữ U bắt đầu từ 0px, 0px và kết thúc 100px ở bên phải tại 100px, 0px . Để tìm hiểu thêm về cú pháp này, hãy xem Hướng dẫn bỏ túi SVG của Joni Trythall hoặc Đường dẫn SVG minh họa Hướng dẫn cú pháp trên các thủ thuật CSS.

Một số điều cơ bản nhanh chóng:

      

  • M 0,0 có nghĩa là di chuyển đến tọa độ x, y của 0, 0 mà không cần vẽ bất cứ thứ gì
  •   

  • L 10,10 có nghĩa là vẽ một đường thẳng từ điểm trước đến 10,10
  •   

  • Đường cong Bezier được xử lý bằng C và ba bộ tọa độ.

Có nhiều cách khác trong đặc tả Đường chuyển động CSS để đặt đường dẫn bù, chẳng hạn như sử dụng các hàm CSS Shape khác như circle () hộp của phần tử hoặc tia mới ( ) chức năng giới thiệu tọa độ cực cho CSS. Tuy nhiên, tại thời điểm này, chỉ có path () được hỗ trợ trong tất cả các trình duyệt đã được đề cập. Có một tiến bộ đáng kể được thực hiện với tia () đằng sau cờ, vì vậy nó có khả năng là sản phẩm tiếp theo được phát hành.

Xác định khoảng cách

Khoảng cách bù sẽ là bất kỳ giá trị độ dài nào, mặc dù tôi muốn rằng tỷ lệ phần trăm là có giá trị nhất vì 100% luôn đại diện cho điểm cuối của đường dẫn. Vì vậy, đi được nửa đường dọc theo con đường cũng đơn giản như nói 50% .

  
  
Việc đặt các giá trị tỷ lệ phần trăm khác nhau cho khoảng cách bù trên một đường dẫn. Xem ví dụ trực tiếp trên CodePen.

Hoạt hình dọc theo con đường

Như đã nêu trước đó, CSS Chuyển động Thông số đường dẫn thực sự không cung cấp chuyển động ra khỏi hộp. Chúng tôi lấy định nghĩa đường dẫn của mình và sau đó sử dụng các phương thức hoạt hình thực sự đã thử và hiện có để làm động giá trị của khoảng cách bù . Vì vậy, để làm động một phần tử dọc theo toàn bộ đường dẫn của nó từ 0% (giá trị mặc định của offset-distance ) đến 100% chúng ta có thể thiết lập hoạt hình CSS ( hoặc sử dụng API Ảnh động Web, requestAnimationFrame v.v.) để sửa đổi các giá trị này.

   # my-Element   {
   offset-path  :   path   (  'M0,0 C40,160 60,160 100,0'  ]); 
   hoạt hình  :   đi   4000ms   vô hạn   dễ dàng thoát ra  
} 
 @keyframes   đi   {
   100  %   {
     offset-distance  :   100%  ; 
  } 
}   

   Xem Bút
  Khoảng cách chênh lệch trong chuyển động
của Dan Wilson (@danwilson)
  trên CodePen.

Hoạt hình chính con đường

Chúng ta cũng có thể tự thay đổi đường dẫn và nếu nó có cùng số điểm dữ liệu, trình duyệt có thể nội suy các giá trị và chuyển đổi đường dẫn một cách trơn tru. Nếu chúng ta bắt đầu với một đường dẫn đơn giản được xác định là đường dẫn ('M0,0 L100,100') (xác định một đoạn đường từ 0px, 0px đến 100px, 100px ) chúng tôi có thể làm động nó tới một phân khúc dòng mới miễn là nó cũng chỉ có hai điểm, chẳng hạn như đường dẫn ('M100,0 L0,100') . Nếu bạn cố đi đến đường dẫn ('M100,0 L0,100 L100,100') trình duyệt sẽ không thể xác định các giá trị ở giữa vì các đường dẫn có số điểm khác nhau, vì vậy đường dẫn sẽ chỉ đơn giản là chuyển đổi giữa hai định nghĩa thay vì chuyển đổi suôn sẻ.

   Xem Bút
  Đường dẫn hoạt hình
của Dan Wilson (@danwilson)
  trên CodePen.

Xác định vị trí của phần tử

Theo mặc định, phần tử sẽ đối mặt với hướng của đường đi, với mặt phải của nó luôn vuông góc với đường dẫn mọi lúc. Điều này có được là nhờ vào giá trị auto của thuộc tính bù thứ ba offset-xoay . Nếu chúng ta muốn phần tử quay mặt ra khỏi hướng của đường dẫn, chúng ta có thể sử dụng giá trị ngược lại .

Thuộc tính offset-xoay cũng lấy các giá trị góc nếu bạn muốn phần tử giữ theo hướng cố định ở một góc nhất định và không đi theo đường dẫn. Với 0deg phần tử sẽ giữ nguyên hướng ban đầu, không có đường dẫn trong đó phía bên phải luôn tiếp tục quay mặt sang bên phải bất kể hướng của đường đi.

Tùy chọn cuối cùng là kết hợp các từ khóa auto hoặc đảo ngược với tùy chọn thứ hai về góc. Ví dụ, bằng cách cài đặt offset-rotation: auto 90deg phần tử sẽ xoay để tính hướng của đường dẫn, nhưng nó sẽ có độ lệch thêm 90 độ. Vì vậy, bằng cách xoay phần tử một phần tư lượt, bây giờ nó là mặt trên đối diện với hướng của đường dẫn và vẫn vuông góc với nó.

   Xem Bút
  offset-xoay so với biến đổi / xoay
của Dan Wilson (@danwilson)
  trên CodePen.

Cũng giống như offset-path offset-distance có thể hoạt hình, khi sử dụng các góc (thậm chí kết hợp với auto / ngược lại ) thuộc tính offset-xoay có thể được làm động.

Xác định điểm neo trên đường dẫn

Các yếu tố sẽ được tập trung vào đường dẫn, nhưng chúng ta có thể thay đổi điều này bằng cách đặt thuộc tính offset-anchor . Các loại giá trị tương tự như những gì bạn thấy trong vị trí nền hoặc gốc biến đổi trong đó bạn đặt vị trí ngang (trục x) và dọc (y -axis) vị trí. Vì vậy, giá trị mặc định là offset-anchor: 50% 50% cũng có thể được chỉ định là trung tâm . Chúng ta có thể thực hiện góc trên cùng bên trái (giống như 0% 0% ) hoặc bất kỳ giá trị độ dài / phần trăm nào khác để thay đổi điểm trên phần tử neo vào đường dẫn. Thậm chí có thể sử dụng các giá trị bên ngoài giới hạn của phần tử với số âm hoặc tỷ lệ phần trăm vượt quá 100%, chẳng hạn.

   Xem Bút
  Neo đường dẫn neo
của Dan Wilson (@danwilson)
  trên CodePen.

Khi các giá trị là độ dài hoặc tỷ lệ phần trăm, thuộc tính neo có thể được làm động. Do đó, mỗi trong số bốn thuộc tính offset có thể được tạo thành hình động mặc dù chỉ có một thuộc tính di chuyển dọc theo con đường theo nghĩa truyền thống là offset-distance .

   Xem Bút
  tạo hiệu ứng khoảng cách bù, xoay và neo
của Dan Wilson (@danwilson)
  trên CodePen.

Tại sao phần tử của tôi thay đổi khi tôi chỉ áp dụng một đường dẫn?

Bạn có thể nghi ngờ rằng không có gì thực sự xảy ra khi bạn chỉ định một đường dẫn, vì đó là khoảng cách, xoay và neo ảnh hưởng đến cách một phần tử xuất hiện dọc theo đường dẫn.

Bản thân đường dẫn có tọa độ 0,0 được đặt tại vị trí ban đầu của phần tử trong luồng tài liệu. Khi chỉ định đường dẫn bù phần tử của chúng ta được đặt ở đầu đường dẫn (vô hình) ( khoảng cách bù: 0% ). Tuy nhiên, rất có thể phần tử sẽ trông khác đi, tuy nhiên, vì đó là điểm trung tâm của phần tử được đặt ở đầu đường dẫn ( offset-anchor: 50% 50% ), và quyền ban đầu của nó bên sẽ đối mặt với hướng của đường dẫn ( offset-rotation: auto ).

  
  
Một phần tử có thể di chuyển từ vị trí ban đầu của nó chỉ với một đường dẫn bù được xác định do điểm bắt đầu được chỉ định và các giá trị mặc định cho các thuộc tính khác. Xem ví dụ trực tiếp trên CodePen.

Nếu điểm bắt đầu của đường dẫn nằm ở góc trên cùng bên trái thì tối thiểu phần tử sẽ được dịch chuyển lên và sang trái sao cho điểm neo (tại trung tâm theo mặc định) góc trên bên trái của vị trí ban đầu của phần tử. Nếu bạn muốn phần tử giữ nguyên vị trí ban đầu khi bắt đầu, bạn có thể sẽ cần phải làm lại định nghĩa đường dẫn để bắt đầu tại điểm neo ban đầu của bạn hoặc thực hiện một số phép thuật với vị trí hoặc thuộc tính biến đổi độc lập.

Kết luận

Đó là một số điều cơ bản chính, nhưng chắc chắn có nhiều khả năng để khám phá. Đường dẫn chuyển động thường được liên kết với các đường cong liên tục, nhưng không có gì nói rằng bạn không thể sử dụng các đường thẳng hoặc đường dẫn bị ngắt kết nối. Đường dẫn chuyển động thường được liên kết với, tốt, chuyển động, nhưng offset có thể cung cấp một cách duy nhất để đơn giản định vị các phần tử tĩnh. Bây giờ là lúc để khám phá những khả năng của họ.

  

[ad_2]
Source link: webdesignernews

Leave a Reply

Your email address will not be published. Required fields are marked *

.
.
.
.