网友回复
原理就是记录下购买按钮点击的位置x.y,然后通过新建小球组件来播放css的动画,结束后给父组件一个回调即可。
点击页面记录一下点击的位置并显示小球:
// 购买页面点击事件 buy.js
buy(event){
  this.setData({
    "position.startX": event.touches[0].clientX,
    "position.startY": event.touches[0].clientY,
    showBall: true
  });
}
// buy.wxml
新建一个组件 animationBall.wxml
// animationBall.wxml
<view bindanimationend="observeAnimation" class="ball-box animationBall" wx:if="{{showBall}}" style="{{style}}">
</view>
// animationBall.wxss
.ball-box {
  width: 20rpx;
  height: 20rpx;
  border-radius: 100%;
  position: fixed;
  z-index: 10;
  left: var(--startX);
  top: var(--startY);
}
//y轴位移:小球先有一小段的上升,上升到最高点,这一段y轴位移一直在增加,我们给它动画叫做throwTopY,接下来抛物线下降,这个过程y轴一直在减少,一直减少到我们终点为止,我们叫做throwDropY。
@keyframes throwTopY {
  0% {
    top: var(--startY);
  }
  100% {
    top: calc(var(--startY) - 120rpx);
  }
}
@keyframes throwDr...点击查看剩余70%
- threejs如何做个三维搭积木的游戏?
- three如何实现标记多个起始路过地点位置后选择旅行工具(飞机汽车高铁等),最后三维模拟行驶动画导出mp4?
- ai实时驱动的3d数字人可视频聊天的开源技术有吗
- swoole+phpfpm如何实现不同域名指向不同目录的多租户模式?
- 如何用go替换nginx实现请求phpfpm解析运行php脚本?
- 有没有浏览器离线运行进行各种文档、图片、视频格式转换的开源工具?
- 如何使用go语言搭建一个web防火墙?
- linux如何检测特定网络协议比如http协议中报文是否包含特点关键词并阻止返回给客户?
- 如果在nginx外过滤包含某些关键词的网页并阻止打开?
- 程序员怎么做副业赚钱?



 
				 
			 
			 
				 
			