mpvue实现小程序签到金币掉落动画(api实现)


Posted in Javascript onOctober 17, 2019

这里使用小程序自带的api来实现,用小程序来写动画的恶心点在于,没有帧,只能用setimeout 来作为帧来使用,

下面是实现代码, 下面是简单用div代替了图片,需要什么图片,可以自行替换相应的div即可

需要变成原生小程序,则需要修改一下代码的写法

效果图:

mpvue实现小程序签到金币掉落动画(api实现)

创建金币动画组件 clockAnimation.vue

<template>
 <div class="container" v-if='isShow'>
  <!-- 创建金币对象 -->
  <!-- 大金币 -->
  <div :class="coinShow?'coinShow bgCoin':'bgCoin'" :animation="bgCoinAnimation" ></div>
  <!-- 7个小金币 -->
  <div :class="coinShow?'coinShow coin coin1':' coin coin1'" :animation="coinAnimation1">1</div>
  <div :class="coinShow?'coinShow coin coin2':' coin coin2'" :animation="coinAnimation2">2</div>
  <div :class="coinShow?'coinShow coin coin3':' coin coin3'" :animation="coinAnimation3">3</div>
  <div :class="coinShow?'coinShow coin coin4':' coin coin4'" :animation="coinAnimation4">4</div>
  <div :class="coinShow?'coinShow coin coin5':' coin coin5'" :animation="coinAnimation5">5</div>
  <div :class="coinShow?'coinShow coin coin6':' coin coin6'" :animation="coinAnimation6">6</div>
  <div :class="coinShow?'coinShow coin coin7':' coin coin7'" :animation="coinAnimation7">7</div>
 </div>
</template>
<script>
 export default{
  data() {
   return {
    coinShow:false,//金币对象是否显示,用于重置动画时,隐藏对象
    isShow:false, //遮罩显示
   //大金币动画
   bgCoinAnimation:{},
   //小金币动画
   coinAnimation1:{},
   coinAnimation2:{},
   coinAnimation3:{},
   coinAnimation4:{},
   coinAnimation5:{},
   coinAnimation6:{},
   coinAnimation7:{},
   }
  },
  methods: {
      //动画
   animation(){
    this.coinShow =false
     this.isShow = true
    this.bgAnimation()
    this.smallAnimation()
  },
  //大金币动画
  bgAnimation(){
     var animation = wx.createAnimation({
    duration:1000,
   timingFunction: 'ease-in-out',
  })
    this.timer = setTimeout(()=>{
      animation.translate3d(0,30,0).step().translate3d(0,0,0).step().rotate(80).step({duration:400}).rotate(0).step({duration:500})
   this.bgCoinAnimation = animation.export()
    },100)
     setTimeout(()=>{
   animation.opacity(0).scale(4).step()
   this.bgCoinAnimation = animation.export()
  },3000)
   },
   //小金币动画
   smallAnimation(){
      var animation = wx.createAnimation({
    duration:1000,
   timingFunction: 'ease-in-out',
  })
  animation.translate3d(0,30,0).step().translate3d(0,0,0).step()
  setTimeout(()=>{
    this.coinAnimation1 = animation
  },300)
  setTimeout(()=>{
    this.coinAnimation2 = animation
  },500)
  setTimeout(()=>{
    this.coinAnimation3 = animation
  },600)
  setTimeout(()=>{
    this.coinAnimation4 = animation
  },700)
  setTimeout(()=>{
    this.coinAnimation5 = animation
  },800)
  setTimeout(()=>{
    this.coinAnimation6 = animation
  },900)
  setTimeout(()=>{
    this.coinAnimation7 = animation.export()
  },1000)
 //小金币掉落动画
  setTimeout(()=>{
    animation.translate3d(0,1000,0).step()
    this.coinAnimation1 = animation
    this.coinAnimation2 = animation
    this.coinAnimation3 = animation
    this.coinAnimation4 = animation
    this.coinAnimation5= animation
    this.coinAnimation6 = animation
    this.coinAnimation7 = animation
  },3000)
 //动画结束,重置动画初始位置
  setTimeout(()=>{
   this.coinShow =true
      var animation = wx.createAnimation({
       duration:300,
   timingFunction: 'ease-in-out',
  })
      var animation2 = wx.createAnimation({
       duration:300,
   timingFunction: 'ease-in-out',
  })
   animation.translate3d(0,-1000,0).step()
   animation2.translate3d(0,-1000,0).step().scale(1).step()
    this.bgCoinAnimation = animation2.export()
    this.coinAnimation1 = animation
    this.coinAnimation2 = animation
    this.coinAnimation3 = animation
    this.coinAnimation4 = animation
    this.coinAnimation5= animation
    this.coinAnimation6 = animation
    this.coinAnimation7 = animation
   setTimeout(()=>{
    this.isShow = false
   },500)
  },4000)
   }
   },
  mounted () {
  },
  onShow(){
  }
 }
</script>
<style lang="scss" scoped>
.container{
 position:absolute;
 top:0;
 left: 0;
 width: 100%;
 height: 100vh;
 // z-index: 999;
 background: rgba(5, 5, 5,0.5)
}
.bgCoin{
 background: rgb(233, 201, 19);
 border-radius: 50%;
 width: 100rpx;
 height: 100rpx;
 position: absolute;
 left: 350rpx;
 margin-left:-50rpx;
 top:600rpx;
  text-align: center;
  line-height: 100rpx;
  color: #ffffff;
  transform:rotate(180deg);
  transform:translate3d(0,-1000rpx,0);
}
.coinShow{
 opacity: 0;
}
.coin{
 background: rgb(233, 201, 19);
 border-radius: 50%;
 width: 50rpx;
 height: 50rpx;
  position: absolute;
  font-size: 24rpx;
  text-align: center;
  line-height: 40rpx;
  color: #ffffff;
  transform:translate3d(0,-1000rpx,0);
}
.coin1{
 top:40rpx;
 left:60rpx;
}
.coin2{
 top:90rpx;
 left:200rpx;
}
.coin3{
 top:860rpx;
 left:250rpx;
}
.coin4{
 top:150rpx;
 left:600rpx;
}
.coin5{
 top:270rpx;
 left:500rpx;
}
.coin6{
 top:490rpx;
 left:580rpx;
}
.coin7{
 top:350rpx;
 left:150rpx;
}
</style>

使用 引入组件

<template>
  <view>
   <view @click="clockInAnimation">立即签到</view>
 <clockAnimation :isShow="clockIsShow" ref="clockAnimation"></clockAnimation>
 </view>
</template>
<script>
     //引入组件
   import clockAnimation from "../../components/clockAnimation.vue";  
 export default {
 components: {
  clockAnimation
 },
 data() {
   return {
      clockIsShow: false,
   }
 },
  methods: {
  clockInAnimation() {
   this.clockIsShow = true;
   this.$refs.clockAnimation.animation();
  },
  }
</script>

总结

以上所述是小编给大家介绍的mpvue实现小程序签到金币掉落动画(api实现),希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!
如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!

Javascript 相关文章推荐
bcastr2.0 通用的图片浏览器
Nov 22 Javascript
各浏览器对click方法的支持差异小结
Jul 31 Javascript
jQuery弹性滑动导航菜单实现思路及代码
May 02 Javascript
jqplot通过ajax动态画折线图的方法及思路
Dec 08 Javascript
Javascript中的方法链(Method Chaining)介绍
Mar 15 Javascript
使用jQuery实现图片遮罩半透明坠落遮挡
Mar 16 Javascript
Jquery和angularjs获取check框选中的值的方法汇总
Jan 17 Javascript
使用BootStrap和Metroui设计的metro风格微网站或手机app界面
Oct 21 Javascript
jQuery使用Layer弹出层插件闪退问题
Dec 22 Javascript
为vue-router懒加载时下载js的过程中添加loading提示避免无响应问题
Apr 03 Javascript
如何以Angular的姿势打开Font-Awesome详解
Apr 22 Javascript
jquery中为什么能用$操作
Jun 18 jQuery
JS设置自定义快捷键并实现图片上下左右移动
Oct 17 #Javascript
JavaScript 实现同时选取多个时间段的方法
Oct 17 #Javascript
Layui事件监听的实现(表单和数据表格)
Oct 17 #Javascript
浅谈Vue.set实际上是什么
Oct 17 #Javascript
Vuex modules模式下mapState/mapMutations的操作实例
Oct 17 #Javascript
vuex + keep-alive实现tab标签页面缓存功能
Oct 17 #Javascript
Weex开发之地图篇的具体使用
Oct 16 #Javascript
You might like
php+js实现图片的上传、裁剪、预览、提交示例
2013/08/27 PHP
php遍历目录输出目录及其下的所有文件示例
2014/01/27 PHP
Zend Framework教程之模型Model基本规则和使用方法
2016/03/04 PHP
PHP命令Command模式用法实例分析
2018/08/08 PHP
PHP常用函数之获取汉字首字母功能示例
2019/10/21 PHP
Javascript的一种模块模式
2008/03/22 Javascript
关于JS中的闭包浅谈
2013/08/23 Javascript
使用js操作css实现js改变背景图片示例
2014/03/10 Javascript
nodejs之请求路由概述
2014/07/05 NodeJs
jquery bind(click)传参让列表中每行绑定一个事件
2014/08/06 Javascript
jQuery动画特效实例教程
2014/08/29 Javascript
js图片翻书效果代码分享
2015/08/20 Javascript
JavaScript 闭包机制详解及实例代码
2016/10/10 Javascript
jQuery 出现Cannot read property ‘msie’ of undefined错误的解决方法
2016/11/23 Javascript
javascript 定时器工作原理分析
2016/12/03 Javascript
angularJS 指令封装回到顶部示例详解
2017/01/22 Javascript
JS设计模式之状态模式概念与用法分析
2018/02/05 Javascript
浅谈从React渲染流程分析Diff算法
2018/09/08 Javascript
vue 2.1.3 实时显示当前时间,每秒更新的方法
2018/09/16 Javascript
vue中监听返回键问题
2019/08/28 Javascript
Vue实现移动端拖拽交换位置
2020/07/29 Javascript
vue 内联样式style中的background用法说明
2020/08/05 Javascript
python生成器表达式和列表解析
2016/03/10 Python
Python中常用的8种字符串操作方法
2019/05/06 Python
基于python实现的百度新歌榜、热歌榜下载器(附代码)
2019/08/05 Python
Python对接 xray 和微信实现自动告警
2019/09/17 Python
Python 通过爬虫实现GitHub网页的模拟登录的示例代码
2020/08/17 Python
python中random.randint和random.randrange的区别详解
2020/09/20 Python
h5页面背景图很长要有滚动条滑动效果的实现
2021/01/27 HTML / CSS
天网面试题
2013/04/07 面试题
普通党员个人剖析材料
2014/10/08 职场文书
故意伤害罪辩护词
2015/05/21 职场文书
大学生读书笔记大全
2015/07/01 职场文书
CSS3 天气图标动画效果
2021/04/06 HTML / CSS
vue实现登陆页面开发实践
2022/05/30 Vue.js
Redis配置外网可访问(redis远程连接不上)的方法
2022/12/24 Redis