CSS3 animation完成逐帧动漫实际效果

日期:2020-10-17 类型:科技新闻 

关键词:如何制作微信小程序,微信小程序源码,小程序码生成,凡科网微信小程序,微信公众号小程序

css3里边的animation特性十分强劲,可是自身用的较为少,近期有次招聘面试就恰好被问到了,趁如今有時间就对animation做1个小总结。另外完成1个逐帧动漫的demo做为训练

animation特性1览

由于animation特性较为多,随后在w3c上看有点蛋疼,果断也做了1份导图,之后想查询,就1目了然了

应用animation完成逐帧动漫

熟习了animation的特性以后,得找个简易的小新项目完成下,逐帧动漫好成心思,先跑1个考虑下自身
思路很简易,便是给元素1个雪碧图的情况,随后加上的帧动漫变更background-position,重要编码:

CSS Code拷贝內容到剪贴板
  1. @keyframes run{   
  2.     from{   
  3.         background-position: 0 0;   
  4.     }   
  5.     to{   
  6.         background-position: -1540px 0 ;   
  7.     }   
  8. }   
  9. div{   
  10.     width:140px;   
  11.     height:140px;   
  12.     backgroundurl(run.png) ;   
  13.     animation-name:run;   
  14.     animation-duration:1s;   
  15.     animation-iteration-count:infinite;   
  16. }   
  17.   

可是跑起来后大家发现,每帧动漫之间帧动漫全是拖动,其实不是大家要的实际效果,为何呢?
原先animation默认设置以ease方法过渡,它会在每一个重要帧之间插进补间动漫,因此动漫实际效果是连贯性性的
了解缘故就好办了,处理思路便是:

CSS Code拷贝內容到剪贴板
  1. @keyframes run{   
  2.     0%, 8%{  /*姿势1*/  }   
  3.     9.2%, 17.2%{  /*姿势2*/  }   
  4.     ...   
  5. }   
  6.   

step1:姿势之间滞留8帧,0%设定姿势1,姿势1完毕在8%
step2:姿势之间过渡1.2帧,9.2%设定姿势2,姿势2完毕在17.2%

详细编码:

XML/HTML Code拷贝內容到剪贴板
  1. <!DOCTYPE html>  
  2. <html lang="en">  
  3. <head>  
  4.     <meta charset="UTF⑻">  
  5.     <title>css3逐帧动漫</title>  
  6.     <style>  
  7.     @keyframes run{   
  8.     0%, 8%{  background-position: 0 0;  }   
  9.     9.2%, 17.2%{  background-position: ⑴40px 0;  }   
  10.     18.4%, 26.4%{  background-position: ⑵80px 0 ;  }   
  11.     27.6%, 35.6%{  background-position: ⑷20px 0 ;  }   
  12.     36.8%, 44.8%{  background-position: ⑸60px 0 ;  }   
  13.     46%, 54%{  background-position: ⑺00px 0 ;  }   
  14.     55.2%, 63.2%{  background-position: ⑻40px 0 ;  }   
  15.     64.4%, 72.4%{  background-position: ⑼80px 0 ;  }   
  16.     73.6%, 81.6%{  background-position: ⑴120px 0 ;  }   
  17.     82.8%, 90.8%{  background-position: ⑴400px 0 ;  }   
  18.     92%, 100%{  background-position: ⑴540px 0 ;  }   
  19.     }   
  20.     @-webkit-keyframes run{   
  21.     0%, 8%{  background-position: 0 0;  }   
  22.     9.2%, 17.2%{  background-position: ⑴40px 0;  }   
  23.     18.4%, 26.4%{  background-position: ⑵80px 0 ;  }   
  24.     27.6%, 35.6%{  background-position: ⑷20px 0 ;  }   
  25.     36.8%, 44.8%{  background-position: ⑸60px 0 ;  }   
  26.     46%, 54%{  background-position: ⑺00px 0 ;  }   
  27.     55.2%, 63.2%{  background-position: ⑻40px 0 ;  }   
  28.     64.4%, 72.4%{  background-position: ⑼80px 0 ;  }   
  29.     73.6%, 81.6%{  background-position: ⑴120px 0 ;  }   
  30.     82.8%, 90.8%{  background-position: ⑴400px 0 ;  }   
  31.     92%, 100%{  background-position: ⑴540px 0 ;  }   
  32.     }   
  33.     div{   
  34.         width:140px;   
  35.         height:140px;   
  36.         background: url(blog/754767/201606/754767⑵02992⑴734972084.png) ;   
  37.         animation:run 1s infinite;   
  38.             -webkit-animation:run 1s infinite;   
  39.         animation-fill-mode : backwards;   
  40.             -webkit-animation-fill-mode : backwards;   
  41.     }   
  42.     </style>  
  43. </head>  
  44. <body>  
  45.     <div></div>  
  46. </body>  
  47. </html>  

也有此外1个完成方式,便是运用steps(),便是帧之间的阶跃动漫,这个在w3c里边沒有写,先贴个图

由上图可知:

steps(1,start):动漫1刚开始就跳到 100% 直至这1帧(并不是全部周期)完毕
steps(1,end):维持 0% 的款式直至这1帧(并不是全部周期)完毕

此外还可以立即设定 animation-timing-function:step-start/step-end
step-start实际效果等同于于steps(1,start),step-end实际效果等同于于steps(1,end)

最后实际效果,由于录制的难题将会有点卡顿,有兴趣爱好的同学能够立即拷贝编码去跑下:

详细编码:

XML/HTML Code拷贝內容到剪贴板
  1. <!DOCTYPE html>  
  2.     <html lang="en">  
  3.     <head>  
  4.         <meta charset="UTF⑻">  
  5.         <title>css3逐帧动漫</title>  
  6.         <style>  
  7.         @keyframes run{   
  8.             0%{   
  9.                 background-position: 0 0;   
  10.             }   
  11.             8.333%{   
  12.                 background-position: ⑴40px 0;   
  13.             }   
  14.             16.666%{   
  15.                 background-position: ⑵80px 0 ;   
  16.             }   
  17.             25.0%{   
  18.                 background-position: ⑷20px 0 ;   
  19.             }   
  20.             33.333%{   
  21.                 background-position: ⑸60px 0 ;   
  22.             }   
  23.             41.666%{   
  24.                 background-position: ⑺00px 0 ;   
  25.             }   
  26.             50.0%{   
  27.                 background-position: ⑻40px 0 ;   
  28.             }   
  29.             58.333%{   
  30.                 background-position: ⑼80px 0 ;   
  31.             }   
  32.             66.666%{   
  33.                 background-position: ⑴120px 0 ;   
  34.             }   
  35.             75.0%{   
  36.                 background-position: ⑴260px 0 ;   
  37.             }   
  38.             83.333%{   
  39.                 background-position: ⑴400px 0 ;   
  40.             }   
  41.             91.666%{   
  42.                 background-position: ⑴540px 0 ;   
  43.             }   
  44.             100%{   
  45.                 background-position: 0 0 ;   
  46.             }   
  47.         }   
  48.         @-webkit-keyframes run{   
  49.             0%{   
  50.                 background-position: 0 0;   
  51.             }   
  52.             8.333%{   
  53.                 background-position: ⑴40px 0;   
  54.             }   
  55.             16.666%{   
  56.                 background-position: ⑵80px 0 ;   
  57.             }   
  58.             25.0%{   
  59.                 background-position: ⑷20px 0 ;   
  60.             }   
  61.             33.333%{   
  62.                 background-position: ⑸60px 0 ;   
  63.             }   
  64.             41.666%{   
  65.                 background-position: ⑺00px 0 ;   
  66.             }   
  67.             50.0%{   
  68.                 background-position: ⑻40px 0 ;   
  69.             }   
  70.             58.333%{   
  71.                 background-position: ⑼80px 0 ;   
  72.             }   
  73.             66.666%{   
  74.                 background-position: ⑴120px 0 ;   
  75.             }   
  76.             75.0%{   
  77.                 background-position: ⑴260px 0 ;   
  78.             }   
  79.             83.333%{   
  80.                 background-position: ⑴400px 0 ;   
  81.             }   
  82.             91.666%{   
  83.                 background-position: ⑴540px 0 ;   
  84.             }   
  85.             100%{   
  86.                 background-position: 0 0 ;   
  87.             }   
  88.         }   
  89.         div{   
  90.             width:140px;   
  91.             height:140px;   
  92.             background: url(754767/201606/754767⑵02992⑴734972084.png) ;   
  93.             animation:run 1s steps(1, start) infinite;   
  94.                 -webkit-animation:run 1s steps(1, start) infinite;   
  95.         }   
  96.         </style>  
  97.     </head>  
  98.     <body>  
  99.         <div></div>  
  100.     </body>  

原文详细地址:http://www.cnblogs.com/Fengzp/p/5548493.html

以上便是本文的所有內容,期待对大伙儿的学习培训有一定的协助,也期待大伙儿多多适用脚本制作之家。

上一篇:css3的过虑实际效果简易案例 返回下一篇:没有了