css3动画笔记

日期:2016-4-27 13:06 | 标签: | 阅读:580

趁着中午大好时光,学习下@十年踪迹关于前端动画的PPT,由于只看到ppt,里面的很多东西还得自己去网上搜寻资料,更好的使用是把这个ppt作为一个大纲,按照这个大纲去学习去实践。

概要

  1. 动画本质
    • 定时器 改变元素的属性,其是关于时间的函数
    • 浏览器/GPU 的渲染过程
  2. 动画分类
    • javaScript 动画
    • DOM 动画
    • Canvas 动画
    • CSS3 动画
      • transition
      • animation
    • SVG 动画

两种动画构建方式

  1. 增量构建方法
    var deg = 0;
    block.addEventListener('click', function(){
    var self = this;
    setInterval(function(){
     self.style.transform = 'rotate(' + (deg++) +'deg)';
    });
    });
    
    思考:这段代码的优点与不足。
  2. 时间构建法
    block.addEventListener('click', function(){
    var self = this, startTime = Date.now();
    setInterval(function(){
     var T = 1000;
     var p = (Date.now() - startTime) / T;
     self.style.transform = 'rotate(' + (360 * p) +'deg)';
    });
    });
    

对比如下(增量 vs 时间)

物体运动

  1. 向右匀速/加速运动/减速运动2s
    block.addEventListener('click', function(){
     var self = this, startTime = Date.now(),distance = 200, T = 2000;
     requestAnimationFrame(function step(){
       var p = Math.min(1.0, (Date.now() - startTime) / T);
       self.style.transform = 'translateX(' + (distance * p) +'px)';
        // 加速
        // self.style.transform = 'translateX(' + (distance * p * p) +'px)';
        // 减速
        //self.style.transform = 'translateX(' + (distance * p * (2-p)) +'px)';
        if(p < 1.0) requestAnimationFrame(step);
     });
    });
    
  2. 还有很多运动,如抛物线运动、斜线运动、摆动、正弦现运动,圆周运动...这些都需要有数学公式支持才行。如:圆的轨迹方程。
    //代数方程
    x2+y2=r2x2+y2=r2
    参数方程
    x=R⋅cos(ωt)x=R⋅cos(ωt)
    y=R⋅sin(ωt)y=R⋅sin(ωt)
    极坐标方程
    ρ=R
    

动画简易封装

首先,提供一般封装库:

function Animator(duration, progress, easing){
  this.duration = duration;
  this.progress = progress;
  this.easing = easing || function(p){return p};
}
Animator.prototype = {
  start: function(finished){
    var startTime = Date.now();
    var duration = this.duration,
        self = this;
    requestAnimationFrame(function step(){
      var p = (Date.now() - startTime) / duration;
      var next =  true;

      if(p < 1.0){
        self.progress(self.easing(p), p);
      }else{
        if(typeof finished === 'function'){
          next = finished() === false;
        }else{
          next = finished === false;
        }
        if(!next){
          self.progress(self.easing(1.0), 1.0);
        }else{
          startTime += duration;
          self.progress(self.easing(p), p);
        }
      }
      if(next) requestAnimationFrame(step);
    });
  }
};

使用方式可以是这样:

var animator = new Animator(2000,  function(p){
    var tx = -100 * Math.sin(2 * Math.PI * p),ty = -100 * Math.cos(2 * Math.PI * p);
    block.style.transform = 'translate(' + tx + 'px,' + ty + 'px)';     
  });
block.addEventListener('click', function(){
  animator.start(false);
});

当然,还可以组建动画队列:

function AnimationQueue(animators){
  this.animators = animators || [];
}
AnimationQueue.prototype = {
  status: 'ready',
  append: function(){
    var args = [].slice.call(arguments);
    this.animators.push.apply(this.animators, args);
  },
  flush: function(){
    if(this.animators.length){
      var self = this;
      function play(){
        var animator = self.animators.shift();
        if(animator instanceof Animator){
          animator.start(function(){
            if(self.animators.length){
              play();
            }
          });
        }else{
          animator.apply(self);
          if(self.animators.length){
            play();
          }
        }
      }
      play();
    }
  }
};

具体应用如循环折线动画,代码如下:

var a4 = new Animator(1000,  function(p){
  var ty = 100 * (1-p);
  block.style.transform = 'translateY(' + ty + 'px)';     
});
block.addEventListener('click', function(){
  var animators = new AnimationQueue();
  animators.append(a1, a2, a3, a4, function(){
    this.append(a1, a2, a3, a4, arguments.callee);
  });
  animators.flush();
});

css3动画

参考:http://matrix.h5jun.com/slide/show?id=117#/67

svg动画

参考这些链接:http://matrix.h5jun.com/slide/show?id=117#/80

GUP层面

  1. translate3d(0,0,0);
  2. CSS will-change property
    • IE ×
    • Chrome 36+ √
    • Safari 9.1+ √
  3. Repaints & Layout
    • top, left properties ×
    • transform √
  4. Update
    • setTimeout ×
    • requestAnimationFrame √

思考

  1. 弹跳的小球
  2. 能量损耗
  3. 滚动的小球
  4. 平滑动画
  5. 甩出小球
  6. 摩擦力
  7. 贝塞尔曲线
  8. cubic-bezier easing
  9. 3D动画
  10. 逐帧动画,实际上就是切换图片

参考

十年踪迹ppt: http://matrix.h5jun.com/slide/show?id=117#/
动画相关框架: http://matrix.h5jun.com/slide/show?id=117#/85
入门级3D案例介绍:http://www.cnblogs.com/coco1s/p/5414153.html
Javascript高性能动画与页面渲染

版权声明: 署名-非商业性使用-禁止演绎 4.0 国际(CC BY-NC-ND 4.0
Copyright ©2013-2017 | 粤ICP备14081691号 | yipeng手工打造 | 联系方式