最近在写⼩程序,然后之前⽹页也写过css动画实现,就记⼀下
1.依靠css的动画效果
第⼀种实现⽅法是通过transition
view
{
width:100px;
/*transition: property duration timing-function delay;*/
transition: width 2s;
-moz-transition: width 2s; /* Firefox 4 */
-webkit-transition: width 2s; /* Safari 和 Chrome */
-
o-transition: width 2s; /* Opera */
}
刀剑封魔录任务攻略view:hover
{
width:300px;
}
PS:当多个属性⼀起变化可以将property的值设为all
transition的效果是需要伪类选择器来触发的,不能⾃动播放,所以CSS还有animation属性来设置动画。
第⼆种实现动画效果的⽅法就是靠animation属性来实现
@keyframes animations{
0% {
...
}
...
100% {
...
}
}
.animation{
/*animation: name duration timing-function delay iteration-count direction;*/
/*详情参见*/
animation: animations 3s liner;
眼线的画法}
这种⽅法可以实现很复杂的效果,像背景图⽚⾃动轮播(⽤infinite配合delay)什么的。
但是写起来⽐较复杂,⽽且没有办法根据事件触发(纯css⽆法实现),所以⼩程序推出了wx.creatAnimation()的API。
2.依靠API的动画实现
第⼆张⽅法就是依靠⼩程序提供的API来实现。
wx.createAnimation(Object object)
东莞搬厂 ⾸先需要在wxml中设置好animation
<view animation='{{animationdata}}'></view>
然后在js⾥设置好动画数据
Page({安家结局是什么
data:{
animationdata:{}
},
...
})
最后通过调⽤API实现动画
var animation = wx.createAnimation({
duration: 2000,
timingFunction: 'ease',
delay: 3000
})
.opacity(0.7)电厂化学水处理
.step()
this.setData({
animationData: port()邓丽芳
})
详见⼩程序官⽅⽂档
其实没什么好说的,⼩程序把繁琐的css封装成API了,这样的好处就是很⽅便,但是缺点就是实现复杂效果⽐较⿇烦。。。
值得⼀提的是animation.step(),同⼀step的动画会同时执⾏
.opacity(0.7)
.step() //以上为同⼀步执⾏的的动画
.opacity(1)
.step() //此为下⼀步的动画
//不同步骤的动画如果不加⼊参数是默认根据wx.creatAnimation(object)⾥的参数来的
animation.step()
最后说⼀下this.setdata⾥的port()
其实⼩程序的官⽅⽂档⾥讲解的很清楚了,特别是⾥的⽰例代码,看⼀下就明⽩了。
差不多就这样。。。其实还有通过JavaScript实现动画效果的,那个我还没摸索过,只能写点⾃⼰⽐较了解的。
发布评论