前端动画库

爬到树上看月亮

已于 2022-12-15 18:00:53 修改

阅读量1.7k

点赞数 1

文章标签：前端 javascript css

于 2022-12-08 10:23:04 首次发布

本文链接：https://blog.csdn.net/qq_41702466/article/details/128232074

版权

一、CSS动画库

HOVER.CSS

链接： http://ianlunn.github.io/Hover/

install： npm install hover.css --save

文档： https://www.npmjs.com/package/hover.css#downloadinstall

Animate.css

链接： https://animate.style/

install： yarn add animate.css

Magic.css

链接： https://www.minimamente.com/project/magic/

install： yarn add magic.css

文档： https://www.npmjs.com/package/magic.css

动画效果： https://www.jq22.com/yanshi2754

二、JS动画库

JQuery.transit

文档： https://animate.style/

install： npm install --save jquery.transit

AnimeJS（很好用）

链接： https://animejs.com/

install： npm install animejs --save

补充文档： https://www.npmjs.com/package/animejs

2.1AnimeJS简单使用

安装：

npm install animejs --save    

yarn add animejs

引入：

import animejs from "animejs/lib/anime.es.js"

const anime = require('animejs');

anime( config : [ Object ])

语法

anime({
    targets:"#target1 .target2",
    druation:1000,
    easing:'easeInOutQuad',
    direction:'alternate'
})

targets

targts 动画目标

targets类型：

CSS选择器、Dom/NodeList、Object、Array[types[]:CSS选择器 || Dom/NodeList || Object]

//选两个特殊的目标类型做个例子
//Object
const lv={
    value:0,
    count:0
}
anime({
    targets:lv,
    value:100,
    count:10,
    round:1,//应该是动画动的时候进行四舍五入
    update:()=>{
        //do something
    }
})
//Array
const nv=['.el', domNode, jsObject]
anime({
  targets: nv,
  translateX: 250
});

direction：交替方式

DIRECTION 表示交替方式

参数

normal： 动画向前播放。当它到达结尾时，它会从第一个关键帧重新开始。
reverse： 从最后一个关键帧开始，在第一个关键帧结束
alternate： 动画先向前播放，然后向后播放：

easing：缓冲

easing 表示动画缓冲

可取值：

linear： linear
penner函数

IN	OUT	IN-OUT	OUT-IN
`'easeInQuad'`	`'easeOutQuad'`	`'easeInOutQuad'`	`'easeOutInQuad'`
`'easeInCubic'`	`'easeOutCubic'`	`'easeInOutCubic'`	`'easeOutInCubic'`
`'easeInQuart'`	`'easeOutQuart'`	`'easeInOutQuart'`	`'easeOutInQuart'`
`'easeInQuint'`	`'easeOutQuint'`	`'easeInOutQuint'`	`'easeOutInQuint'`
`'easeInSine'`	`'easeOutSine'`	`'easeInOutSine'`	`'easeOutInSine'`
`'easeInExpo'`	`'easeOutExpo'`	`'easeInOutExpo'`	`'easeOutInExpo'`
`'easeInCirc'`	`'easeOutCirc'`	`'easeInOutCirc'`	`'easeOutInCirc'`
`'easeInBack'`	`'easeOutBack'`	`'easeInOutBack'`	`'easeOutInBack
`'easeInBounce'`	`'easeOutBounce'`	`'easeInOutBounce'`	`'easeOutInBounce'`

var demoContentEl = document.querySelector('.penner-equations-demo');
var fragment = document.createDocumentFragment();
var easingNames = [
  'easeInQuad',
  'easeInCubic',
  'easeInQuart',
  'easeInQuint',
  'easeInSine',
  'easeInExpo',
  'easeInCirc',
  'easeInBack',
  'easeOutQuad',
  'easeOutCubic',
  'easeOutQuart',
  'easeOutQuint',
  'easeOutSine',
  'easeOutExpo',
  'easeOutCirc',
  'easeOutBack',
  'easeInBounce',
  'easeInOutQuad',
  'easeInOutCubic',
  'easeInOutQuart',
  'easeInOutQuint',
  'easeInOutSine',
  'easeInOutExpo',
  'easeInOutCirc',
  'easeInOutBack',
  'easeInOutBounce',
  'easeOutBounce',
  'easeOutInQuad',
  'easeOutInCubic',
  'easeOutInQuart',
  'easeOutInQuint',
  'easeOutInSine',
  'easeOutInExpo',
  'easeOutInCirc',
  'easeOutInBack',
  'easeOutInBounce',
]

function createEasingDemo(easing) {
  var demoEl = document.createElement('div');
  demoEl.classList.add('el', 'square', 'stretched', 'easing-'+easing);
  anime({
    targets: demoEl,
    translateY: [50, -50],
    direction: 'alternate',
    loop: true,
    delay: 100,
    endDelay: 100,
    duration: 1000,
    easing: easing
  });
  fragment.appendChild(demoEl);
}

easingNames.forEach(function(easeName) {
  createEasingDemo(easeName);
});

demoContentEl.innerHTML = '';
demoContentEl.appendChild(fragment);

了解其他值可以访问这里，

cubicBezier贝赛尔曲线

速度变化的曲线

四个参数，分别代表曲线的两个端点坐标，如下图所示，斜率表示速度

这里写图片描述

anime({
  targets: '.cubic-bezier-demo .el',
  translateX: 250,
  direction: 'alternate',
  loop: true,
  easing: 'cubicBezier(.5, .05, .1, .3)'
})

spring弹簧函数

PARAMETER	DEFAULT（默认值）	MIN（最小值）	MAX（最大值）
Mass（弹簧凝聚力）	`1`	`0`	`100`
Stiffness（弹簧强度）	`100`	`0`	`100`
Damping（弹簧阻力）	`10`	`0`	`100`
Velocity（弹簧速度）	`0`	`0`	`100`

anime({
  targets: '.spring-physics-demo .el',
  translateX: 250,
  direction: 'alternate',
  loop: true,
  easing: 'spring(1, 80, 10, 0)'
})

Elastic 缓冲函数

基本用法

easing: 'easeOutElastic(amplitude, period)'

该函数有四个模块：

IN	OUT	IN-OUT	OUT-IN
`'easeInElastic'`	`'easeOutElastic'`	`'easeInOutElastic'`	`'easeOutInElastic'`

PARAMETER	DEFAULT	MIN	MAX	INFO
Amplitude	`1`	`1`	`10`	控制曲线的过冲。这个数字越大，超振幅就越大。
Period	`.5`	`0.1`	`2`	控制曲线来回移动的次数。这个数字越小，来回移动的次数就越多。

anime({
  targets: '.elastic-easing-demo .line:nth-child(1) .el',
  translateX: 270,
  easing: 'easeInElastic(1, .6)'
});

anime({
  targets: '.elastic-easing-demo .line:nth-child(2) .el',
  translateX: 270,
  easing: 'easeOutElastic(1, .6)'
});

anime({
  targets: '.elastic-easing-demo .line:nth-child(3) .el',
  translateX: 270,
  easing: 'easeInOutElastic(1, .6)'
});

anime({
  targets: '.elastic-easing-demo .line:nth-child(4) .el',
  translateX: 270,
  easing: 'easeOutInElastic(1, .6)'
});

steps函数

定义动画到达其终点所需的跳跃次数。

easing: 'steps(numberOfSteps)'

PARAMETER	DEFAULT	MIN	MAX
Number of steps	`10`	`1`	`∞`

anime({
  targets: '.step-easing-demo .el',
  translateX: 250,
  direction: 'alternate',
  loop: true,
  easing: 'steps(5)'
})

自定义easing函数

值类型为自定义函数

easing: function() { return function(time) { return time * i} }

PARAMETER	INFO
Time	Return the current time of the animation

anime({
  targets: '.custom-easing-demo .el',
  translateX: 270,
  direction: 'alternate',
  loop: true,
  duration: 2000,
  easing: function(el, i, total) {
    return function(t) {
      return Math.pow(Math.sin(t * (i + 1)), total);
    }
  }
});

property parameters（属性参数）

duration： 持续时间 type： Number
delay： 延迟 type： Number || Object
endDelay： 最后延迟 type： Number || Object
round： 将动画值舍入为1位小数 type： Number

properties

样式变化

CSS样式：大多数CSS都可以做动画

Transforms：

属性名	单位
`'translateX'`	`'px'`
`'translateY'`	`'px'`
`'translateZ'`	`'px'`
`'rotate'`	`'deg'`
`'rotateX'`	`'deg'`
`'rotateY'`	`'deg'`
`'rotateZ'`	`'deg'`
`'scale'`	`—`
`'scaleX'`	`—`
`'scaleY'`	`—`
`'scaleZ'`	`—`
`'skew'`	`'deg'`
`'skewX'`	`'deg'`
`'skewY'`	`'deg'`
`'perspective'`	`'px'`

Object

当目标值是Object时，他的变化主要是由属性自身引起的

properties Type：String||Object||function

如果值是func的话，他的参数将是下面这几个

ARGUMENTS	INFOS
`target`	The curent animated targeted element
`index`	The index of the animated targeted element
`targetsLength`	The total number of animated targets

anime({
  targets: '.function-based-params-demo .el',
  translateX: 270,
  direction: 'alternate',
  loop: true,
  delay: function(el, i, l) {
    return i * 100;
  },
  endDelay: function(el, i, l) {
    return (l - i) * 100;
  }
});

loop: 持续播放 type:Boolean

autoplay：自动播放

value特殊写法

1、计算

anime({
  targets: '.el.relative-values',
  translateX: {
    value: '*=2.5', // 100px * 2.5 = '250px'
    duration: 1000
  },
  width: {
    value: '-=20px', // 28 - 20 = '8px'
    duration: 1800,
    easing: 'easeInOutSine'
  },
  rotate: {
    value: '+=2turn', // 0 + 2 = '2turn'
    duration: 1800,
    easing: 'easeInOutSine'
  },
  direction: 'alternate'
});

2、范围：最终会在100到250之间移动

anime({
  targets: '.el.from-to-values',
  translateX: [100, 250], // from 100 to 250
  delay: 500,
  direction: 'alternate',
  loop: true
});

3、添加动画方式

var colorsExamples = anime.timeline({
  endDelay: 1000,
  easing: 'easeInOutQuad',
  direction: 'alternate',
  loop: true
})
.add({ targets: '.color-hex',  background: '#FFF' }, 0)
.add({ targets: '.color-rgb',  background: 'rgb(255,255,255)' }, 0)
.add({ targets: '.color-hsl',  background: 'hsl(0, 100%, 100%)' }, 0)
.add({ targets: '.color-rgba', background: 'rgba(255,255,255, .2)' }, 0)
.add({ targets: '.color-hsla', background: 'hsla(0, 100%, 100%, .2)' }, 0)
.add({ targets: '.colors-demo .el', translateX: 270 }, 0);

细节动画

anime({
  targets: '.property-keyframes-demo .el',
  translateX: [
    { value: 250, duration: 1000, delay: 500 },
    { value: 0, duration: 1000, delay: 500 }
  ],
  translateY: [
    { value: -40, duration: 500 },
    { value: 40, duration: 500, delay: 1000 },
    { value: 0, duration: 500, delay: 1000 }
  ],
  scaleX: [
    { value: 4, duration: 100, delay: 500, easing: 'easeOutExpo' },
    { value: 1, duration: 900 },
    { value: 4, duration: 100, delay: 500, easing: 'easeOutExpo' },
    { value: 1, duration: 900 }
  ],
  scaleY: [
    { value: [1.75, 1], duration: 500 },
    { value: 2, duration: 50, delay: 1000, easing: 'easeOutExpo' },
    { value: 1, duration: 450 },
    { value: 1.75, duration: 50, delay: 1000, easing: 'easeOutExpo' },
    { value: 1, duration: 450 }
  ],
  easing: 'easeOutElastic(1, .8)',
  loop: true
});

动画控制（实例API）

播放/暂停

var animation = anime({});
//播放
animation.play()
//暂停
animation.pause()

重新开始

var animation = anime({});
//重新开始
animation.restart()

倒退播放

var animation = anime({});
//倒退播放
animation.reverse()

回调函数 & Promise

update：更新时的回调

var updates = 0;

anime({
  targets: '.update-demo .el',
  translateX: 270,
  delay: 1000,
  direction: 'alternate',
  loop: 3,
  easing: 'easeInOutCirc',
  update: function(anim) {
    updates++;
    progressLogEl.value = 'progress : '+Math.round(anim.progress)+'%';
    updateLogEl.value = 'updates : '+updates;
  }
});

begin & complete：开始和完成的回调函数

anime({
  targets: '.begin-complete-demo .el',
  translateX: 240,
  delay: 1000,
  easing: 'easeInOutCirc',
  update: function(anim) {
    progressLogEl.value = 'progress : ' + Math.round(anim.progress) + '%';
    beginLogEl.value = 'began : ' + anim.began;
    completeLogEl.value = 'completed : ' + anim.completed;
  },
  begin: function(anim) {
    beginLogEl.value = 'began : ' + anim.began;
  },
  complete: function(anim) {
    completeLogEl.value = 'completed : ' + anim.completed;
  }
});

loopBegin & loopComplete：循环开始和完成的回调函数

var loopBegan = 0;
var loopCompleted = 0;

anime({
  targets: '.loopBegin-loopComplete-demo .el',
  translateX: 240,
  loop: true,
  direction: 'alternate',
  easing: 'easeInOutCirc',
  loopBegin: function(anim) {
    loopBegan++;
    beginLogEl.value = 'loop began : ' + loopBegan;
  },
  loopComplete: function(anim) {
    loopCompleted++;
    completeLogEl.value = 'loop completed : ' + loopCompleted;
  }
});

change：改变时的回调函数

var changes = 0;

anime({
  targets: '.change-demo .el',
  translateX: 270,
  delay: 1000,
  endDelay: 1000,
  direction: 'alternate',
  loop: true,
  easing: 'easeInOutCirc',
  update: function(anim) {
    progressLogEl.value = 'progress : '+Math.round(anim.progress)+'%';
  },
  change: function() {
    changes++;
    changeLogEl.value = 'changes : ' + changes;
  }
});

changeBegin & changeComplete：改变开始和完成的回调函数

var changeBegan = 0;
var changeCompleted = 0;

anime({
  targets: '.changeBegin-chnageComplete-demo .el',
  translateX: 240,
  delay: 1000,
  endDelay: 1000,
  loop: true,
  direction: 'alternate',
  easing: 'easeInOutCirc',
  update: function(anim) {
    progressLogEl.value = 'progress : '+Math.round(anim.progress)+'%';
  },
  changeBegin: function(anim) {
    changeBegan++;
    beginLogEl.value = 'change began : ' + changeBegan;
  },
  changeComplete: function(anim) {
    changeCompleted++;
    completeLogEl.value = 'change completed : ' + changeCompleted;
  }
});

finished Promise 完成时的回调函数

var progressLogEl = document.querySelector('.promise-demo .progress-log');
var promiseEl = document.querySelector('.promise-demo .el');
var finishedLogEl = document.querySelector('.promise-demo .finished-log');
var demoPromiseResetTimeout;

function logFinished() {
  anime.set(finishedLogEl, {value: 'Promise resolved'});
  anime.set(promiseEl, {backgroundColor: '#18FF92'});
}

var animation = anime.timeline({
  targets: promiseEl,
  delay: 400,
  duration: 500,
  endDelay: 400,
  easing: 'easeInOutSine',
  update: function(anim) {
    progressLogEl.value = 'progress : '+Math.round(anim.progress)+'%';
  }
}).add({
  translateX: 250
}).add({
  scale: 2
}).add({
  translateX: 0
});

animation.finished.then(logFinished);