微信小程序之动画篇

利用transition和animation两种方式实现相同的淡入淡出效果

主要是实现点击展示按钮，按钮消失，菜单有底部缓缓滑入界面；点击菜单中关闭按钮，展示按钮显示，菜单缓缓从底部收回。

废话不多说，直接先上效果图，看效果。

• transition实现的动画效果

• animation实现的相同的动画效果（不同之处，在菜单中加入了内容，同样transition中也可以加入内容）
  

transition动画实现效果具体内容

1. transition动画实现效果的WXML

<button
	type="primary"
	hidden='{{extraClasses}}'
	bindtap="toggleTransition"
	class="show">
		展示
button>
<view class="section {{extraClasses}}" bindtap="toggleTransition">
  <button class="close" catchtap="transitionClose">
    <icon type="clear">icon>
  button>
view>

2. transition动画实现效果的WXSS

.show {
  position: relative;
  z-index: 9;
}
.section {
  width: 100%;
  height: 1334rpx;
  color:#000;
  position: relative;
  z-index: 10;
  background: rgb(112, 120, 235);
  opacity: 0.4;
  transform: translateY(1288px);
  transition: 2s ease;
}
.move {
  transform: translateY(0)
}
.close {
  width: 46rpx;
  height: 46rpx;
  line-height: 46rpx;
  border-radius: 50%;
  position: absolute;
  top: 20rpx;
  right: 20rpx;
}

3. transition动画实现效果的JS

Page({
  /**
   * 页面的初始数据
   */
  data: {
    "extraClasses": ""
  },
  toggleTransition: function(){
    let that = this
    if(that.data.extraClasses == ""){
      that.setData({"extraClasses": "move"})
    }else {
      that.setData({ "extraClasses": "" })
    }
  },
  transitionClose: function(){
  	let that = this
    that.setData({ "extraClasses": "" })
  }
})

transition实现动画效果主要是css过渡效果，加上js控制类名来实现动画变化。

animation动画实现效果具体内容

1. animation动画实现效果的WXML

<button
	type="primary"
	hidden='{{toggle}}'
	bindtap="toggleAnimation"
	class="show">
		展示
button>
<view 
	class="section" 
	animation="{{ani}}" 
	bindtap="toggleAnimation">
  <button class="close" catchtap="animationClose">
    <icon type="clear">icon>
  button>
  <view class='time-title'>选择时间view>
  <view class='time-choose-block'>
    <date-choose bindchooseevent='chooseDate' />
  view>
view>

2. animation动画实现效果的WXSS

.show {
  position: relative;
  z-index: 9;
}
.section {
  width: 100%;
  height: 1334rpx;
  color:#000;
  position: relative;
  z-index: 10;
  background: rgb(112, 120, 235);
  opacity: 0.4;
  transform: translateY(1288px);
  transition: 2s ease;
}
.move {
  transform: translateY(0)
}
.close {
  width: 46rpx;
  height: 46rpx;
  line-height: 46rpx;
  border-radius: 50%;
  position: absolute;
  top: 20rpx;
  right: 20rpx;
}
.time-choose-block{
  position: absolute;
  top: 120rpx;
  left: 30rpx;
  float: left;
  width: 200px;
  height: 40px;
  line-height: 40px;
  text-align: center;
  font-size: 14px;
  color: #000;
}
.time-title{
  position: absolute;
  top: 50rpx;
  left: 20rpx;
  float: left;
  height: 40px;
  line-height: 40px;
  width: 80px;
  color: rgb(102, 255, 0);
  text-align: center;
}

3. animation动画实现效果的JS

Page({
  /**
   * 页面的初始数据
   */
  data: {
    "toggle": false
  },
  toggleAnimation: function(){
    let that = this
    let animation = wx.createAnimation({
      duration: 2000,
      timingFunction: 'ease-out',
      delay: 200
    })
    animation.translateY(0).step()
    that.setData({
      ani: animation.export(),
      "toggle": true
    })
  },
  animationClose: function(){
    let that = this
    let animation = wx.createAnimation({
      duration: 2000,
      timingFunction: 'ease-out',
      delay: 200
    })
    animation.translateY(1288).step()
    that.setData({
      ani: animation.export(),
      "toggle": false
    })
  }
})

animation实现动画效果主要是通过小程序提供的wx.createAnimation API，结合animation实现。

小程序中transition和animation实现动画的异同

1. transition，相比于animation来说，更为简单易用；
2. 同样transition也有一些局限，transition实现动画必须通过事件来触发
3. transition在没有事件频繁触发下，不能实现重复性动画
4. transition不能实现动画的中间状态

微信小程序官方文档之动画篇