最近在写⼩程序,然后之前⽹页也写过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实现动画效果的,那个我还没摸索过,只能写点⾃⼰⽐较了解的。