微信小程序-动画处理

动画

微信小程序的动画,姑且把它分成css动画和js动画两部分吧。

css动画:这部分,我试了一下,由于他跟react-native这类的开发模式不一样,它对css3的keyframes动画是全支持的。这部分就纯css 知识了,就不详细说了。

animation动画

     <\view class='content' animation="{{animationData}}" >

    var animation = wx.createAnimation({
      duration: 1000,
      timingFunction: 'ease',
    })

    this.animation = animation

    animation.translateY(260).step()

    this.setData({
      animationData: animation.export()
    })

这是简化的动画,就是通过绑定animation,然后把最后的值export出去,就触发动画。

但是:::::这个玩意还是少用的好,用起来很不方便。最好还是用css解决。至少我感觉比较难接受的亮点:

  • 1.没有回调函数,这能忍?怎么能没有回调函数呢。我也是醉了。我看官方 的demo里,也全是用settimeout来拼凑的。
  • 2.单位不统一。不同文档流里,官方推荐的是rpx这个单位。但是为什么动画里,单位是px???????这怎么搞。

但是但是,还是很麻烦。

只用css处理动画,但是好像不支持transition属性,所以只能用@keyframe自己处理,代码贴一下

   <\view class="cover {{showSelection ? 'weui-animate-fade-in' : ''}}  {{closeSelection ? 'weui-animate-fade-out' : ''}} "> <\/view>

  // 显示选择框
  showSelectionFn() {
    this.setData({
      showSelection: true
    })
  },
    // 关闭选择框
  closeSelectionFn() {
    this.setData({
      closeSelection: true
    })
    setTimeout(() => {
      this.setData({
        showSelection: false,
        closeSelection: false
      })

    }, 300)
  },
@keyframes slideUp {
    from {
        transform: translate3d(0, 100%, 0);
    }

    to {
        transform: translate3d(0, 0, 0);
    }
}

.weui-animate-slide-up {
    animation: slideUp ease .3s forwards;
}

@keyframes slideDown {
    from {
        transform: translate3d(0, 0, 0);
    }

    to {
        transform: translate3d(0, 100%, 0);
    }
}

.weui-animate-slide-down {
    animation: slideDown ease .3s forwards;
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

.weui-animate-fade-in {
    animation: fadeIn ease .3s forwards;
}

@keyframes fadeOut {
    from {
        opacity: 1;
    }
    to {
        opacity: 0;
    }
}

.weui-animate-fade-out {
    animation: fadeOut ease .3s forwards;
}

随机浏览