微信小程序动画Animation


https://download.csdn.net/download/weixin_42413802/11238874

一.先看一个例子及代码：



<view  class="view_a">
<image animation="{{animation}}" class="a_img" src="https://img-blog.csdn.net/20170614190537974?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvVUZPMDAwMDE=/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center"></image>
</view>
<view class="sure" bindtap="dh">发射</view>


.sure{
  width: 10%;
  height:80rpx;
  margin-top: 0rpx;
  margin-left: 45%;
  background: #00ddff;
  border-radius: 50rpx;
  text-align: center;
  line-height: 80rpx;
  color: #fff;
}
.view_a{
  width: 100%;
  height: 900rpx;
  display: flex;
  background-image: url('https://img-blog.csdn.net/20170615103714645?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvVUZPMDAwMDE=/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center');
}
.a_img{
  margin-top: 600rpx;
  margin-left:100rpx;
  width: 80rpx;
  height:80rpx;
}

data: {
    animation : ''
 },
 dh: function(){
    var that = this;
     //实例化
     that.animation = wx.createAnimation({
       duration: 200,
       timingFunction: "ease",
       delay: 1000,
       transformOrigin: 'center',
       success: function (res) {
         console.log(res)
       }
     })
     that.animation
     .rotate(180).step()   //原点顺时针旋转180度  也可以不加.step() 不加的话便是动画同时执行
     .rotate(-180).step()  //原点逆时针旋转180度
     .rotate(0).step()     //回到初始
     .scale(1.3).step()    // x,y轴同时缩放1.3倍
     .translateX(90).step()//x轴偏移90px
     .translateY(20).step()//y轴偏移20px
     .skew(30).step()      //x轴沿顺时针偏移30度
     .skew(-30).step()     //x轴沿逆时针偏移30度
     .skew(0).step()       //返回不偏移时
     .rotateY(180).step()  //Y轴旋转180度
     .translateY(-222).step()//在y轴偏移-222px
     .matrix3d(0.8, 0, 28).step();
     that.setData({
       animation: that.animation.export()
     })},

二. 小程序动画 Animation API

wx.createAnimation(OBJECT)
创建一个动画实例animation。调用实例的方法来描述动画。最后通过动画实例的export方法导出动画数据传递给组件的animation属性。
注意: export 方法每次调用后会清掉之前的动画操作 
OBJECT参数说明：
参数
类型
必填
默认值
说明
duration
Integer
否
400
动画持续时间，单位ms
timingFunction
String
否
"linear"
定义动画的效果
delay
Integer
否
0
动画延迟时间，单位 ms
transformOrigin
String
否
"50% 50% 0"
设置transform-origin
timingFunction 有效值：
值
说明
linear
动画从头到尾的速度是相同的
ease
动画以低速开始，然后加快，在结束前变慢
ease-in
动画以低速开始
ease-in-out
动画以低速开始和结束
ease-out
动画以低速结束
step-start
动画第一帧就跳至结束状态直到结束
step-end
动画一直保持开始状态，最后一帧跳到结束状态
var animation = wx.createAnimation({
  transformOrigin: "50% 50%",
  duration: 1000,
  timingFunction: "ease",
  delay: 0
})

animation
动画实例可以调用以下方法来描述动画，调用结束后会返回自身，支持链式调用的写法。
animation 对象的方法列表：
样式：
方法
参数
说明
opacity
value
透明度，参数范围 0~1
backgroundColor
color
颜色值
width
length
长度值，如果传入 Number 则默认使用 px，可传入其他自定义单位的长度值
height
length
长度值，如果传入 Number 则默认使用 px，可传入其他自定义单位的长度值
top
length
长度值，如果传入 Number 则默认使用 px，可传入其他自定义单位的长度值
left
length
长度值，如果传入 Number 则默认使用 px，可传入其他自定义单位的长度值
bottom
length
长度值，如果传入 Number 则默认使用 px，可传入其他自定义单位的长度值
right
length
长度值，如果传入 Number 则默认使用 px，可传入其他自定义单位的长度值
旋转：
方法
参数
说明
rotate
deg
deg的范围-180~180，从原点顺时针旋转一个deg角度
rotateX
deg
deg的范围-180~180，在X轴旋转一个deg角度
rotateY
deg
deg的范围-180~180，在Y轴旋转一个deg角度
rotateZ
deg
deg的范围-180~180，在Z轴旋转一个deg角度
rotate3d
(x,y,z,deg)
同transform-function rotate3d
缩放：
方法
参数
说明
scale
sx,[sy]
一个参数时，表示在X轴、Y轴同时缩放sx倍数；两个参数时表示在X轴缩放sx倍数，在Y轴缩放sy倍数
scaleX
sx
在X轴缩放sx倍数
scaleY
sy
在Y轴缩放sy倍数
scaleZ
sz
在Z轴缩放sy倍数
scale3d
(sx,sy,sz)
在X轴缩放sx倍数，在Y轴缩放sy倍数，在Z轴缩放sz倍数
偏移：
方法
参数
说明
translate
tx,[ty]
一个参数时，表示在X轴偏移tx，单位px；两个参数时，表示在X轴偏移tx，在Y轴偏移ty，单位px。
translateX
tx
在X轴偏移tx，单位px
translateY
ty
在Y轴偏移tx，单位px
translateZ
tz
在Z轴偏移tx，单位px
translate3d
(tx,ty,tz)
在X轴偏移tx，在Y轴偏移ty，在Z轴偏移tz，单位px
倾斜：
方法
参数
说明
skew
ax,[ay]
参数范围-180~180；一个参数时，Y轴坐标不变，X轴坐标延顺时针倾斜ax度；两个参数时，分别在X轴倾斜ax度，在Y轴倾斜ay度
skewX
ax
参数范围-180~180；Y轴坐标不变，X轴坐标延顺时针倾斜ax度
skewY
ay
参数范围-180~180；X轴坐标不变，Y轴坐标延顺时针倾斜ay度
矩阵变形：
方法
参数
说明
matrix
(a,b,c,d,tx,ty)
同transform-function matrix
matrix3d
 
同transform-function matrix3d
动画队列
调用动画操作方法后要调用 step() 来表示一组动画完成，可以在一组动画中调用任意多个动画方法，一组动画中的所有动画会同时开始，一组动画完成后才会进行下一组动画。step 可以传入一个跟 wx.createAnimation() 一样的配置参数用于指定当前组动画的配置。
参考文章：动画APIhttps://mp.weixin.qq.com/debug/wxadoc/dev/api/api-animation.html

微信小程序动画之点击效果


代码：

js：
// pages/test/test.js
Page({
  containerTap: function (res) {
    var that = this
    var x = res.touches[0].pageX;
    var y = res.touches[0].pageY + 85;
    this.setData({
      rippleStyle: ''
    });
    setTimeout(function () {
      that.setData({
        rippleStyle: 'top:' + y + 'px;left:' + x + 'px;-webkit-animation: ripple 0.4s linear;animation:ripple 0.4s linear;'
      });
    }, 200)
  },
})


wxml：
<view class="ripple" style="{{rippleStyle}}"></view>
<view class="container" bindtouchstart="containerTap"></view>


wxss：
page{height:100%}
.container{
    width:100%;
    height:100%;
    overflow: hidden
}
.ripple {
    background-color:aquamarine;
    border-radius: 100%;
    height:10px;
    width:10px;
    margin-top: -90px;
    position: absolute;
    
    overflow: hidden
}
@-webkit-keyframes ripple {
    100% {
    webkit-transform: scale(12);
    transform: scale(12);
    background-color: transparent;
    }
}

微信小程序动画效果
最近一直在做小程序开发,在官方文档中无意间看到过渡动画效果,我就有点小激动,用每一个开发框架的时候我都最先研究动画和过渡
闲来无事写了一个小demo
<!--wxml代码-->
<view class="wrapper">
    	<!-- 微信小程序开发功能获取用户头像userAvatarUrl -->
        <view class="headerImage" catchtap="imageAnimation"  animation="{{animationData}}">
            <open-data type="userAvatarUrl" ></open-data>
        </view>
 		<!-- 微信小程序开发功能获取用户昵称userNickName -->
         <view class="headertext">
            <open-data type="userNickName" class="headertext"></open-data>
        </view>
        
</view>

/*wxss代码*/
.wrapper {
  background: gold;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 500rpx;
}

.headerImage {
  width: 200rpx;
  height: 200rpx;
  margin-bottom: 40rpx;
}

.headertext {
  font-size: 40rpx;
}

//js
const app = getApp()
const computedBehavior = require('miniprogram-computed')//不用理会,这事引入的计算属属性
Component({
  behaviors: [computedBehavior],)//不用理会,这事引入的计算属属性
  data: {
    //初始化
    animationData: "",

  },

  methods: {
    imageAnimation() {
      var animation = wx.createAnimation({

        duration: 4000,
        timingFunction: "ease",
        delay: 0,
        transformOrigin: "50% 50%",

      })
      // animation.rotate(360).step();     //旋转9
      //animation.scale(1.5).step();        //放大
      // animation.translate(0,200).step(); //偏移
      // animation.skew(30,50).step();      //倾斜x,y
      // animation.rotate(45).scale(0.8).translate(10,10).step() //同时执多个效果
      this.setData({
        animationData: animation.export(), //赋值
      })

    },

  },
  computed: {

  },
})