微信小程序動畫實現(API,css)

微信小程序動畫API實現

index.js

clicktap:function(){
    var Animation=wx.createAnimation({
        duration: 2000,
    })
    Animation.rotateZ(-45).step()
    this.setData({
    animation:Animation.export()
    })
}

index.wxml

<view>
  <view class="box" animation="{{animation}}"></view>
  <view class="click" bindtap="clicktap">點擊</view>
</view>

index.wxss

.box{
  background-color: blanchedalmond;
  width: 100rpx;
  height: 100rpx;
  margin: auto;
  margin-top: 50rpx;
}
.click{
  margin: auto;
  background-color: #fcc;
  width: 150rpx;
  text-align: center;
  color: #FFf;
  margin-top: 50rpx;
  padding: 10rpx;
  border-radius: 10rpx;
}

效果：

微信小程序動畫css實現

.box {
  background-color: blanchedalmond;
  width: 100rpx;
  height: 100rpx;
  margin: auto;
  margin-top: 50rpx;
  animation: animation 6s linear infinite;
  animation-delay: 1s
}
@keyframes animation {
  0% {
    transform: rotateZ(0deg);
  }
  50% {
    transform: rotateZ(-45deg);
    background-color: cadetblue;
  }
  100% {
    transform: rotateZ(0deg);
    background-color: burlywood;
  }
}

效果：

給.box的父元素加個背景，.box去掉背景色，view標簽換成<image></image>,可以做出如下效果：