1. animation
animation: move 2s infinite alternate;
@keyframes move
{
0% {opacity: 0;}
50% {opacity: 1;}
100% {opacity: 0;}
}
animation: move 1s steps(7, end); // 8幀分7步
@keyframes signAnima {
0% {background-position-x: 0;}
100% {background-position-x: -90px;}
}
2.lottie
ui提供一個(gè)動(dòng)畫的json,默認(rèn)的渲染方式是svg睹耐。
(1)npm install lottie-web
(2)lottie.vue
<template>
<div ref="lavContainer"></div>
</template>
<script>
import lottie from 'lottie-web';
export default {
name: 'lottie',
props: {
options: {
type: Object,
required: true
},
height: Number,
width: Number,
},
data() {
return {
commonStyle: {
width: '100%',
height: '100%',
overflow: 'hidden',
margin: '0 auto'
}
}
},
watch: {
options() {
this.anim = lottie.loadAnimation({
container: this.$refs.lavContainer,
renderer: 'svg',
loop: this.options.loop !== false,
autoplay: this.options.autoplay !== false,
animationData: this.options.animationData,
rendererSettings: this.options.rendererSettings,
});
this.$emit('animCreated', this.anim)
}
},
mounted() {
this.anim = lottie.loadAnimation({
container: this.$refs.lavContainer,
renderer: 'svg',
loop: this.options.loop !== false,
autoplay: this.options.autoplay !== false,
animationData: this.options.animationData,
rendererSettings: this.options.rendererSettings,
});
this.$emit('animCreated', this.anim)
},
}
</script>
(3)在組件內(nèi)引入lottie.vue,引入json,處理圖片資源路徑
import lottie from 'xxx'
import animationData from 'xxx'
animationData.assets.forEach((item, index) => {
item.u = ''
item.p = require(`@/assets/xxx/img_${index}.png`)
})
(4)使用lottie組件
<lottie
class="xxx"
:height="xxx"
:options="defaultOptions"
@animCreated="handleAnimation"
/>
// defaultOptions
defaultOptions: {
animationData: animationData,
autoplay: true,
loop: false,
// 其他
}
// handleAnimation
handleAnimation(anim) {
this.anim = anim;
this.anim.addEventListener('complete', () => {
this.anim.destroy()
});
},
3.animejs
anime.js 是一款功能強(qiáng)大的Javascript 動(dòng)畫庫(kù)插件。anime.js 可以和CSS3 屬性,SVG,DOM 元素和JS 對(duì)象一起工作前翎,制作出各種高性能,平滑過(guò)渡的動(dòng)畫效果畅涂。
(1)安裝
npm install animejs
bower install animejs
(2)引入
import anime from 'animejs'
(3)使用
const myAnimation = anime({
// 這里的this紙箱anime
targets: '.duration-demo .el',
translateX: `200px`,
translateY: `200px`,
easing: 'easeInOutQuad',
duration: 1000,
loop: false,
complete() {
// xxx
},
update() {
// xxx
}
});