前端入门——动画原理及实现

最新推荐文章于 2024-06-07 16:01:04 发布

|绝对值|

最新推荐文章于 2024-06-07 16:01:04 发布

阅读量414

点赞数

分类专栏：前端

本文链接：https://blog.csdn.net/Erika1001/article/details/105459506

版权

本文深入探讨前端动画，包括JavaScript动画、CSS动画和SVG动画的实现方式。讲解了使用requestAnimationFrame实现平滑动画，以及如何通过 Timing 对象进行动画控制。文章还展示了不同类型的动画效果，如匀速运动、自由落体、摩擦力、平抛、贝塞尔轨迹等，并提供了详细的代码示例。

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

一、动画
动画的基本原理
定时器改变对象的属性
根据新的属性重新渲染动画

function update(context) {
   // 更新属性
}

const ticker = new Ticker();
ticker.tick(update, context);

动画的种类
JavaScript 动画
操作DOM
Canvas
CSS 动画
transition
animation
SVG 动画
SMIL
JS动画的优缺点
优点：灵活度、可控性、性能
缺点：易用性
二、简单动画

let rotation = 0;
requestAnimationFrame(function update() {
  block.style.transform = `rotate(${rotation++}deg)`;
  requestAnimationFrame(update);
});

另一个版本

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

通用化

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

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});
1

通用化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);
      }
    });
  }
}

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) {
l