在pc端和移动端有很多方便使用的动画库，比较出名的是 Animate.css
 今天给大家介绍一个小程序端的动画库，使用起来非常方便，效果也还不错其中大部分动画的来源于Animate.css
 
首先安装
 
如果你的微信小程序项目基于 nodejs 开发，你可以使用 npm 安装，并拷贝到相关目录后 @import
 
npm install ripples.wxss --save
 
直接 clone 或 download 仓库https://github.com/jeasonstudio/Ripples.wxss.git，拷贝 ripples.wxss 或 ripples.min.wxss到相关目录后 @import
 
使用
 
首先在你想引入 Ripples.wxss 动效的 element 上加 ripple class。
如果你想让他循环不断播放，请添加 infinite class。
 
<view class="ripple infinite bounce">element</view>
 
其中这个动画的名字可以直接参考 Animate.css
 

 
控制
 
如果你想控制动画的出现或停止可以参考以下示例
 
<view class="ripple {{bounceShow ? bounce:''}}">bounce</view>
 
Page({
   data: {
       bounceShow: false
   },
   showBounce: function () {
   	let that = this
       that.setData({
           bounceShow: true
       })
       setTimeout(function() {
           that.setData({
               bounceShow: false
       }, 2000)
   })
}}

微信小程序动画效果
 
最近一直在做小程序开发,在官方文档中无意间看到过渡动画效果,我就有点小激动,用每一个开发框架的时候我都最先研究动画和过渡
 
闲来无事写了一个小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: {

  },
})

微信小程序动画之消息框弹出
 
上图
 
 js：
 
Page({
  data: {
    showModalStatus: false
  },
  powerDrawer: function(e) {
    var currentStatu = e.currentTarget.dataset.statu;
    this.util(currentStatu)
  },
  util: function(currentStatu) {
    /* 动画部分 */
    // 第1步：创建动画实例   
    var animation = wx.createAnimation({
      duration: 300, //动画时长  
      timingFunction: "linear", //线性  
      delay: 0 //0则不延迟  
    });

    // 第2步：这个动画实例赋给当前的动画实例  
    this.animation = animation;

    // 第3步：执行第一组动画  
    animation.opacity(0).rotateY(100).step();

    // 第4步：导出动画对象赋给数据对象储存  
    this.setData({
      animationData: animation.export()
    })

    // 第5步：设置定时器到指定时候后，执行第二组动画  
    setTimeout(function() {
      // 执行第二组动画  
      animation.opacity(1).rotateY(0).step();
      // 给数据对象储存的第一组动画，更替为执行完第二组动画的动画对象  
      this.setData({
        animationData: animation
      })

      //关闭  
      if (currentStatu == "close") {
        this.setData({
          showModalStatus: false
        });
      }
    }.bind(this), 200)

    // 显示  
    if (currentStatu == "open") {
      this.setData({
        showModalStatus: true
      });
    }
  }

})
 
wxml：
 
<!--button-->
<view class="btn bubble" bindtap="powerDrawer" data-statu="open">登录</view>

<!--mask-->
<view class="drawer_screen" bindtap="powerDrawer" data-statu="close" wx:if="{{showModalStatus}}"></view>
<!--content-->
<!--使用animation属性指定需要执行的动画-->
<view animation="{{animationData}}" class="drawer_box" wx:if="{{showModalStatus}}">

  <!--drawer content-->
  <view class="drawer_title">消息框</view>
  <view class="drawer_content">
  </view>
  <view class="btn_ok" bindtap="powerDrawer" data-statu="close">确定</view>
</view>
 
wxss：
 
/*button*/

.btn {
  width: 80%;
  padding: 20rpx 0;
  border-radius: 10rpx;
  text-align: center;
  margin: 40rpx 10%;
  background: #07c160;
  color: #fff;
}

/*mask*/

.drawer_screen {
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1000;
  background: #000;
  opacity: 0.4;
  overflow: hidden;
}

/*content*/

.drawer_box {
  width: 650rpx;
  overflow: hidden;
  position: fixed;
  top: 50%;
  left: 0;
  z-index: 1001;
  background: #fafafa;
  margin: -150px 50rpx 0 50rpx;
  border-radius: 3px;
}

.drawer_title {
  padding: 15px;
  font: 20px "microsoft yahei";
  text-align: center;
}

.text {
  font: 20px "microsoft yahei";
  text-align: center;
}

.drawer_content {
  height: 80px;
  overflow-y: scroll; /*超出父盒子高度可滚动*/
}

.btn_ok {
  padding: 10px;
  font: 20px "microsoft yahei";
  text-align: center;
  border-top: 1px solid #e8e8ea;
  color: #3cc51f;
}

.bottom {
  padding-bottom: 20px;
}

.bubble {
  position: relative;
  overflow: hidden;
}

.bubble:after {
  content: "";
  background: #999;
  position: absolute;
  width: 750rpx;
  height: 750rpx;
  left: calc(50% - 375rpx);
  top: calc(50% - 375rpx);
  opacity: 0;
  margin: auto;
  border-radius: 50%;
  transform: scale(1);
  transition: all 0.4s ease-in-out;
}

.bubble:active:after {
  transform: scale(0);
  opacity: 1;
  transition: 0s;
}

 
emmmm最后
 https://blog.csdn.net/michael_ouyang
 谢谢这位大佬的博客，学到了好多！

效果图如下所示
 
 
不懂得可以看注释 都有说明 主要就是理解怎么用 你会用出什么效果
 
.wxml
 
<view class="scroll"></view>
<image class="borimg" src="http://5b0988e595225.cdn.sohucs.com/q_70,c_zoom,w_640/images/20180402/e58cbe3035f343c082557b42a00e4d2e.jpeg"></image>
<image class="bormax" src="http://img2.imgtn.bdimg.com/it/u=1249633517,2092238595&fm=26&gp=0.jpg"></image>
<view class="fanzhuan"></view>
<!-- load1 -->
<view class="load1">
  <view class="rect1"></view>
  <view class="rect2"></view>
  <view class="rect3"></view>
  <view class="rect4"></view>
  <view class="rect5"></view>
</view>
 
.wxss
 
page{
  width: 100%;
  padding-bottom: 100px;
}
view{
  box-sizing: border-box;
}
/* 从头到尾速度相同 linear
   动画无限次播放   infinite
   动画轮流反向播放 alternate
   低速开始和结束 ease-in-out	
*/
/* 左右滚动 */
.scroll{
  width: 100px;
  height: 100px;
  background-color:red;
  animation:scroll alternate linear infinite 1.5s;
}
@keyframes scroll{
  from {
    margin-left: 0%;
  }
  to {
    margin-left: calc(100% - 100px);
  }
}
/* 无线旋转（360） */
.borimg{
  width: 100px;
  height: 100px;
  border-radius: 50%;
  margin: 50rpx calc((100% - 100px) / 2)  0 calc((100% - 100px) / 2);
  animation: borimg linear infinite 5s;

}
@keyframes borimg{
  from{
    transform:rotate(-360deg);
  }
  to{
    transform:rotate(360deg);
  }
}
/* 放大图片 */
.bormax{
  width:300px;
  height:300px;
  margin: 50rpx calc((100% - 300px) / 2)  0 calc((100% - 300px) / 2);
  animation: bormax infinite 1.5s;
}
@keyframes bormax{
  from{
    transform: scale(0.7);
  }
  to{
    transform: scale(1);
  }
}
/* 无线反转 */
.fanzhuan{
  width:60px;
  height:60px;
  margin: 50rpx calc((100% - 60px) / 2)  0 calc((100% - 60px) / 2);
  background-color:#67CF22;
  animation: fanzhuan infinite 1.2s;
}
@keyframes fanzhuan{
  0% {
    transform: perspective(120px) rotateX(0deg) rotateY(0deg);
  } 
  50% {
    transform: perspective(120px) rotateX(-180deg) rotateY(0deg);
  } 
  100% {
    transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg);
  }
}
/* load1 */
.load1 {
  width: 50px;
  height: 60px;
  margin: 50rpx calc((100% - 50px) / 2)  0 calc((100% - 50px) / 2);
}
.load1>view{
  background-color: #67CF22;
  height: 100%;
  width: 6px;
  float: left;
  margin-right: 4px;
  animation: stretchdelay 1.2s infinite ease-in-out;
}
.load1>.rect2{
  animation-delay: -1.1s;
}
.load1>.rect3{
  animation-delay: -1.0s;
}
.load1>.rect4{
  animation-delay: -0.9s;
}
.load1>.rect5{
  animation-delay: -0.8s;
}
@-webkit-keyframes stretchdelay {
  0%, 40%, 100% { -webkit-transform: scaleY(0.4) }
  20% { -webkit-transform: scaleY(1.0) }
}
@keyframes stretchdelay {
  0%, 40%, 100% {
    transform: scaleY(0.4);
    -webkit-transform: scaleY(0.4);
  }  20% {
    transform: scaleY(1.0);
    -webkit-transform: scaleY(1.0);
  }
}
 
遇到问题可以看我主页加我Q，很少看博客，对你有帮助别忘记点赞收藏。