360前端星计划—前端动画可以这么玩（月影）

最新推荐文章于 2024-04-16 08:39:03 发布

liu_ye96

最新推荐文章于 2024-04-16 08:39:03 发布

阅读量336

点赞数

文章标签： javascript

本文链接：https://blog.csdn.net/liu_ye96/article/details/105453297

版权

本文详细介绍了前端动画的基本原理，包括JavaScript、CSS和SVG动画，并通过多个实例展示了JavaScript实现的各种动画效果，如匀速运动、自由落体、摩擦力、平抛、旋转、贝塞尔曲线等。此外，还探讨了Web Animation API在动画实现中的应用。

摘要由CSDN通过智能技术生成

JS动画原理与实现

1. 动画的基本原理

定时器改变对象的属性
根据新的属性重新渲染动画

function update(context) {
   
   // 更新属性
}
const ticker = new Ticker();
ticker.tick(update, context);

2. 动画的种类

JavaScript 动画
- 操作DOM
- Canvas
CSS 动画
- transition
- animation
SVG 动画
- SMIL

JavaScript 动画优缺点：

优点：灵活度、可控性、性能
缺点：易用性

2.1 简单动画第一个版本：

let rotation = 0;
requestAnimationFrame(function update() {
   
  block.style.transform = `rotate(${
     rotation++}deg)`; //增量，很难精确知道旋转周期
  requestAnimationFrame(update);
});

2.2 第二个版本：

let rotation = 0;
let startTime = null;
const T = 2000; //2s周期
requestAnimationFrame(function update() {
   
  if(!startTime) startTime = Date.now();
  const p = (Date.now() - startTime)/T;
  block.style.transform = `rotate(${
     360 * p}deg)`; 
  requestAnimationFrame(update);
});

2.3 通用化

function update({
   target}, count) {
   
  target.style.transform = `rotate(${
     count++}deg)`;
}

class Ticker {
   
  tick(update, context) {
   
    let count = 0;
    requestAnimationFrame(function next() {
   
      if(update(context, ++count) !== false) {
   
        requestAnimationFrame(next);
      }
    });
  }
}

const ticker = new Ticker();
ticker.tick(update, {
   target: block});

2.3 通用化2

function update({
   target}, {
   time}) {
   
  target.style.transform = `rotate(${
     360 * time / 2000}deg)`;
}

class Ticker {
   
  tick(update, context) {
   
    let count = 0;
    let startTime = Date.now();
    requestAnimationFrame(function next() {
   
      count++;
      const time = Date.now() - startTime;
      if(update(context, {
   count, time}) !== false) {
   
        requestAnimationFrame(next);
      }
    });
  }
}

const ticker = new Ticker();
ticker.tick(update, {
   target: block});

2.3 通用化3

function update({
   context}, {
   time}) {
   
  context.clearRect(0, 0, 512, 512);
  context.save();
  context.translate(100, 100);
  context.rotate(time * 0.005);
  context.fillStyle = '#00f';
  context.fillRect(-50, -50, 100, 100);
  context.restore();
}

class Ticker {
   
  tick(update, context) {
   
    let count = 0;
    let startTime = Date.now();
    requestAnimationFrame(function next() {
   
      count++;
      const time = Date.now() - startTime;
      if(update(context, {
   count, time}) !== false) {
   
        requestAnimationFrame(next);
      }
    });
  }
}

2.4 封装Timing

class Timing {
   
  constructor({
   duration, easing} = {
   }) {
   
    this.startTime = Date.now();
    this.duration = duration;
    this.easing = easing || function(p){
   return p};
  }
  get time() {
   
    return Date.now() - this.startTime;
  }
  get p() {
   
    return this.easing(Math.min(this.time / this.duration, 1.0));
  }
}

class Ticker {
   
  tick(update, context, timing) {
   
    let count = 0;
    timing = new Timing(timing);
    requestAnimationFrame(function next() {
   
      count++;
      if(update(context, {
   count, timing}) !== false) {
   
        requestAnimationFrame(next);
      }
    });
  }
 }