一、Dynamics.js 是一个JS库，能为你提供9种标准的动效，你可以制定其中的持续时间、频率、预期尺寸和强度等数据，创造出符合物理效果的动效。
二、功能介绍
Dynamics通过可视化定制接近生活的物理动效， 为体验者带来真实的生活反馈感受，无需过多描述，广泛的应用场景，使其流行。
三、安装使用
npm install dynamics.js
安装完毕后，提取文件夹中的dynamics.js 文件， 项目页面中通过script标签引入即可
四、场景实践
1、缓动增强
<div id="app">
<div class="wrap wrap01">
<div id="box" class="box"></div>
</div>
<button @click="onTest">start</button>
</div>
<script src="./js/vue.js"></script>
<script src="./js/dynamics.js"></script>
<script>
let vm = new Vue({
el: '#app',
methods: {
onTest() {
let oBox = document.getElementById('box');
dynamics.animate(oBox, {
left: '270px'
},{
type: dynamics.spring,
duration: 500,
frequency: 120,
friction: 140,
complete: function() {
dynamics.animate(oBox, {
left: '660px'
},{
type: dynamics.spring,
delay: 330,
duration: 400,
frequency: 110,
complete: function() {
oBox.style.left = '-120px'
}
})
}
}
)
}
2、延迟进入
animateSlider() {
let oLis = document.getElementById('items').getElementsByTagName('li');
for (let i = 0; i < oLis.length; i++) {
dynamics.animate(oLis[i], {
translateX: '100%',
opacity: 1
}, {
type: dynamics.gravity,
duration: 500,
bounciness: 279,
elasticity: 89,
delay: i * 350
})
}
},
3、展开缓冲
<div id="app">
<div class="nav">
<span @click="packup">收起</span>
<span @click="unfold">展开</span>
</div>
<div id="content" class="content">
<ul>
<li>旗木卡卡西</li>
<li>旗木卡卡西</li>
<li>旗木卡卡西</li>
<li>旗木卡卡西</li>
<li>旗木卡卡西</li>
<li>旗木卡卡西</li>
<li>旗木卡卡西</li>
</ul>
</div>
</div>
<script src="./js/vue.js"></script>
<script src="./js/dynamics.js"></script>
<script>
let vm = new Vue({
el: '#app',
methods: {
unfold() {
let oContentPanel = document.getElementById('content');
let oLis = oContentPanel.getElementsByTagName('li');
dynamics.animate(oContentPanel, {
opacity: 1,
scale: 1
},{
type: dynamics.spring,
frequency: 200,
friction: 270,
duration: 800
})
for(let i=0; i< oLis.length; i++){
dynamics.css(oLis[i],{
opacity: 0,
translateY: 20
})
dynamics.animate(oLis[i],{
opacity: 1,
translateY: 0
},{
type: dynamics.spring,
frequency: 300,
friction: 445,
duration: 1000,
delay: 100 + i*65
})
}
},
packup () {
let oContentPanel = document.getElementById('content');
let oLis = oContentPanel.getElementsByTagName('li');
dynamics.animate(oContentPanel, {
opacity: 0,
scale: 0,
},{
type: dynamics.easeInOut,
duration: 330,
friction: 100
})
}
}
})
</script>
4、点个小爱心
<div id="app">
<div class="wrap" @click="onLike">
<img id="heart" v-show="isCheck" src="./images/heart_s.png" alt="" width="60">
<img id="heart02" v-show="!isCheck" src="./images/heart.png" alt="" width="60">
</div>
</div>
<script src="./js/vue.js"></script>
<script src="./js/dynamics.js"></script>
<script>
let vm = new Vue({
el: '#app',
data: {
isCheck: false,
},
methods: {
onLike() {
let oHeart = document.getElementById('heart');
let oHeart02 = document.getElementById('heart02');
if(this.isCheck){
dynamics.animate(oHeart, {
scale: .3,
opacity: 0
},{
type: dynamics.bounce,
change: (el,pro)=>{
if(pro > 0.5){
this.isCheck = false;
}
}
})
}else {
this.isCheck = true;
dynamics.animate(oHeart, {
scale: 2
},{
type: dynamics.bounce
})
}
}
}
})
</script>
网友评论