小程序怎么实现购物车抛物线动画

这篇文章主要介绍“小程序怎么实现购物车抛物线动画”的相关知识，小编通过实际案例向大家展示操作过程，操作方法简单快捷，实用性强，希望这篇“小程序怎么实现购物车抛物线动画”文章能帮助大家解决问题。

分析

要实现抛物线动画，我当时想到的是用插件的方式，网上有很多，但是要兼容小程序还是有点困难，况且小程序的主包有2M限制;

那么如何在小程序中实现这种效果呢?

 wx.createAnimation css3 transition

实现方式有了，我们再来看一下什么是抛物线，数学上定义抛物线的种类有很多，但就上图的效果而言，需要 水平方向匀速运动 & 垂直方向加速运动 ; wx.createAnimation 提供 timingFunction , 即水平方向 linear , 垂直方向 ease-in

小程序实现

本次实现基于 wepy框架 (非小程序原生)，所以 $apply ---> setData 就好了~

html

<view class="box"><view><button bindtap="handleClick">点击</button></view><view animation="{{animationY}}" style="position:fixed;top:{{ballY}}px;" hidden="{{!showBall}}"><view class="ball" animation="{{animationX}}" style="position:fixed;left:{{ballX}}px;"></view></view></view>

JS

// 设置延迟时间    methods = {handleClick: (e) => {// x, y表示手指点击横纵坐标, 即小球的起始坐标let ballX = e.detail.x,    ballY = e.detail.y;this.isLoading = true;this.$apply();this.createAnimation(ballX, ballY);}    }setDelayTime(sec) {return new Promise((resolve, reject) => {setTimeout(() => {resolve()}, sec)});}// 创建动画createAnimation(ballX, ballY) {let that = this,bottomX = that.$parent.globalData.windowWidth,bottomY = that.$parent.globalData.windowHeight-50,animationX = that.flyX(bottomX, ballX),      // 创建小球水平动画animationY = that.flyY(bottomY, ballY); // 创建小球垂直动画that.ballX = ballX;that.ballY = ballY;that.showBall = true;that.$apply();that.setDelayTime(100).then(() => {// 100ms延时,  确保小球已经显示that.animationX = animationX.export();that.animationY = animationY.export();that.$apply();// 400ms延时, 即小球的抛物线时长return that.setDelayTime(400);}).then(() => {that.animationX = this.flyX(0, 0, 0).export();that.animationY = this.flyY(0, 0, 0).export();that.showBall = false;that.isLoading = false;that.$apply();})}// 水平动画flyX(bottomX, ballX, duration) {let animation = wx.createAnimation({duration: duration || 400,timingFunction: 'linear',})animation.translateX(bottomX-ballX).step();return animation;}// 垂直动画flyY(bottomY, ballY, duration) {let animation = wx.createAnimation({duration: duration || 400,timingFunction: 'ease-in',})animation.translateY(bottomY-ballY).step();return animation;}

关于“小程序怎么实现购物车抛物线动画”的内容就介绍到这里了，感谢大家的阅读。如果想了解更多行业相关的知识，可以关注编程网行业资讯频道，小编每天都会为大家更新不同的知识点。