微信小程序animation动画,微信小程序animation动画无限循环播放

需求是酱紫的:

在这里插入图片描述
页面顶部的喇叭通知,内容不固定,宽度不固定,就是做走马灯(轮播)效果,从左到右的走马灯(轮播),每播放一遍暂停 1500ms ~ 2000ms

刚开始想的是 css 的 position: relative + animation,如果宽度固定还好说,宽度不固定,用百分比的话,想象很美好,现实很骨感,百分比相对的是父元素宽度…,所以 pass 掉

又想到动态生成 keyframes ,这样动态获取子元素宽度,再动态生成 keyframes ,动态传入 偏移量,这样就好了,可是这是小程序…,如果web端倒是可以动态操作 cssRule,小程序端,我真不会

然后从小程序文档直接搜索 animation ,还真找到了
Animation API

于是就理所当然的用上啦

看结果

不唠叨,直接点击查看代码片段:https://developers.weixin.qq.com/s/Ju3T3amk7oKc

思路:

页面结构

<view class="integral-notice common-flex-between">
  <view class="integral-notice-left">
    <image class="integral-notice-left-icon" src="icon-horn.png" mode="aspectFill"></image>
  </view>
  <view class="integral-notice-right common-flex-start">
    <view class="integral-notice-right-item notice_1" animation="{{animationData}}">各位憧橙会员大家好,积分商城发货周期为一个月2次,每个月15号和30号发货,有问题请联系客服,谢谢!</view>
    <!-- 这里之所以放两个一样的,是为了无缝衔接的滚动 -->
    <view class="integral-notice-right-item notice_1" animation="{{animationData}}">各位憧橙会员大家好,积分商城发货周期为一个月2次,每个月15号和30号发货,有问题请联系客服,谢谢!</view>
  </view>
</view>

样式代码


/*通用flex水平方向垂直居中布局*/
.common-flex-between {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: nowrap;
}

.common-flex-around {
  display: flex;
  justify-content: space-around;
  align-items: center;
  flex-wrap: nowrap;
}

.common-flex-center {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: nowrap;
}

.common-flex-start {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  flex-wrap: nowrap;
}
.integral-notice{
  position: fixed;
  left: 0;
  top: 0;
  background: #FEF6F0;
  width: 750rpx;
  height: 98rpx;
  box-sizing: border-box;
  padding-left: 24rpx;
  padding-right: 24rpx;
}
.integral-notice-left{
  box-sizing: border-box;
  padding-right: 20rpx;
}
.integral-notice-left-icon{
  display: block;
  width: 38rpx;
  height: 34rpx;
}
.integral-notice-right{
  overflow: hidden;
}
.integral-notice-right-item{
  white-space: nowrap;
  color: #141418;
  font-size: 28rpx;
  letter-spacing: 2rpx;
  height: 32rpx;
  line-height: 34rpx;
  position: relative;
  left: 0;
  top: 0;
}

第一步: 让它动起来

js代码

  /**
   * 页面的初始数据
   */
  data: {
    animationData: {},
  },
  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {
    const query = wx.createSelectorQuery()
    query.selectAll('.notice_1').boundingClientRect((res)=>{
      let noticeWidth = res[0].width
      this.startAnimation(noticeWidth)
    })
    query.exec()
  },
  startAnimation(left, duration = 10000) {
    this.animation = wx.createAnimation()
    let offset = -left
    this.animation.left(offset).step({
      duration,
      timingFunction: 'linear'
    })
    this.setData({
      animationData: this.animation.export()
    })
  },

备注:这里你会发现,是动起来了,就执行了一次

木事,改代码,让它执行完的时候回到起点

  startAnimation(left, duration = 10000) {
    this.animation = wx.createAnimation()
    let offset = -left
    this.animation.left(offset).step({
      duration,
      timingFunction: 'linear'
    })
    this.setData({
      animationData: this.animation.export()
    })
    // 这里,让它回去起点,便于后边无限循环
    setTimeout(() => {
      this.animation.left(0).step({
        duration: 0, // 时间为 0
        timingFunction: 'step-start' // 这个是 动画第一帧就跳至结束状态直到结束
      })
      this.setData({
        animationData: this.animation.export()
      })
    }, duration)
  },

看到这里,无限循环播放的动画就知道怎么做了吧,做个递归不就好啦?不信咱试试?

  startAnimation(left, duration = 10000) {
    this.animation = wx.createAnimation()
    let offset = -left
    this.animation.left(offset).step({
      duration,
      timingFunction: 'linear'
    })
    this.setData({
      animationData: this.animation.export()
    })
    setTimeout(() => {
      this.animation.left(0).step({
        duration: 0,
        timingFunction: 'step-start'
      })
      this.setData({
        animationData: this.animation.export()
      })
      // 递归,无限循环播放
      this.startAnimation(left, duration)
    }, duration)
  },

注意:你会发现时好时坏,没事,加延迟,加异步,因为虽然是同步执行的代码,代码执行+运行也要时间啊,1ms、5ms、10ms 也是时间

  startAnimation(left, duration = 10000, wait = 2000) {
    this.animation = wx.createAnimation()
    let offset = -left
    this.animation.left(offset).step({
      duration,
      timingFunction: 'linear'
    })
    this.setData({
      animationData: this.animation.export()
    })
    setTimeout(() => {
      this.animation.left(0).step({
        duration: 0,
        timingFunction: 'step-start'
      })
      this.setData({
        animationData: this.animation.export()
      })
      // 加上延迟,加上需求上的等待时间 wait
      let minWait = 12 // 之所以给了个 minWait,是防止 bug,就是那个代码执行/运行时间,经测试,我这里 12ms 的延迟比较合适
      setTimeout(() => {
        this.startAnimation(left, duration, wait)
      }, wait < minWait ? minWait : wait)
    }, duration)
  },

欧啦,大功告成,
在这里插入图片描述

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:/a/59426.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

Python web实战之 Django 的模板语言详解

关键词&#xff1a; Python、web开发、Django、模板语言 概要 作为 Python Web 开发的框架之一&#xff0c;Django 提供了一套完整的 MVC 模式&#xff0c;其中的模板语言为开发者提供了强大的渲染和控制前端的能力。本文介绍 Django 的模板语言。 1. Django 模板语言入门 Dj…

宇树Unitree Z1机械臂使用教程

宇树Unitree Z1机械臂使用教程 作者&#xff1a;Herman Ye Galbot Auromix Auromix是一个机器人爱好者组织&#xff0c;欢迎参与我们Github上的开源项目 更新日期&#xff1a;2023/08/04 注意&#xff1a;此文档在该日期下测试有效。 以下内容参考宇树官方的Z1 Docs。 由宇树…

JavaScript |(四)正则表达式 | 尚硅谷JavaScript基础实战

学习来源&#xff1a;尚硅谷JavaScript基础&实战丨JS入门到精通全套完整版 文章目录 &#x1f4da;正则表达式&#x1f4da;正则表达式字面量方式&#x1f4da;字符串&正则表达式&#x1f407;split()&#x1f407;search()&#x1f407;match()&#x1f407;replace()…

Vue3_语法糖—— <script setup>以及unplugin-auto-import自动引入插件

<script setup>import { ref , onMounted} from vue;let obj ref({a: 1,b: 2,}); let changeObj ()>{console.log(obj)obj.value.c 3 //ref写法}onMounted(()>{console.log(obj)})</script> 里面的代码会被编译成组件 setup() 函数的内容。 相当于 <…

牛客网Verilog刷题——VL51

牛客网Verilog刷题——VL51 题目答案 题目 请编写一个十六进制计数器模块&#xff0c;计数器输出信号递增每次到达0&#xff0c;给出指示信号zero&#xff0c;当置位信号set 有效时&#xff0c;将当前输出置为输入的数值set_num。模块的接口信号图如下&#xff1a; 模块的时序图…

Redis的Java客户端

目录 1.Jedis的使用 前置工作-ssh进行端口转发 JedisAPI的使用 Jedis连接池 2.SpringDataRedis的使用 1.创建项目 2.配置文件 3.注入RedisTemplate对象 4.编写代码 3.SpringRedisTemplate 哈希结构用法 ​总结 1.Jedis的使用 Jedis&#xff1a;以Redis命令作为方法…

mysql重置和修改密码 Ubuntu系统

忘记密码要重置密码 cat /etc/mysql/debian.cnf/etc/mysql/debian.cnf这个只有Debian或者Ubuntu服务器才有&#xff0c;里面有mysql安装后自带的用户&#xff0c;作用就是重启及运行mysql服务。我们用这个用户登录来达到重置密码的操作 使用上面的那个文件中的用户名和密码登…

强化学习分享(一) DQN算法原理及实现

摘要&#xff1a;主要讲解DQN算法的原理&#xff0c;伪代码解读&#xff0c;基于pytorch版本的DQN小游戏编程&#xff0c;同时对该代码进行详细标注&#xff0c;以及奉上原码。 &#xff08;一&#xff09;强化学习算法介绍 DQN&#xff0c;顾名思义&#xff0c;Deep Q Learni…

SpringCloud《Eureka、Ribbon、Feign、Hystrix、Zuul》作用简单介绍

概述 SpringCloud是一个全家桶&#xff0c;包含多个组件。 本文主要介绍几个重要组件&#xff0c;也就是Eureka、Ribbon、Feign、Hystrix、Zuul这几个组件。 一、业务场景介绍 业务流程&#xff0c;支付订单功能 订单服务改变为已支付订单服务调用库存服务&#xff0c;扣减…

中国农村程序员学习此【正则表达式进阶】发明cahtGPT,购买大平层,开上帕拉梅拉,迎娶白富美出任CEO走上人生巅峰

注&#xff1a;最后有面试挑战&#xff0c;看看自己掌握了吗 文章目录 限制可能的用户名匹配空白字符匹配非空白字符指定匹配的上限和下限只指定匹配的下限指定匹配的确切数量检查全部或无正向先行断言和负向先行断言检查混合字符组使用捕获组重用模式使用捕获组搜索和替换删除…

分类预测 | MATLAB实现WOA鲸鱼算法同步优化特征选择结合支持向量机分类预测

分类预测 | MATLAB实现WOA鲸鱼算法同步优化特征选择结合支持向量机分类预测 目录 分类预测 | MATLAB实现WOA鲸鱼算法同步优化特征选择结合支持向量机分类预测效果一览基本介绍程序设计参考资料 效果一览 基本介绍 MATLAB实现WOA鲸鱼算法同步优化特征选择结合支持向量机分类预测…

Windows 系统无法复制粘贴则么处理

Windows 系统无法复制粘贴如何恢复呢&#xff1f; 今天小编遇到一个问题&#xff0c;就是自己的电脑突然无法复制、粘贴&#xff0c;这样的问题我遇到很多次&#xff0c;重启电脑虽然能解决问题&#xff0c;但是不能一直通过重启来解决这样的问题&#xff0c;很浪费时间的。今…

Filebeat+ELK 部署

Node1节点&#xff08;2C/4G&#xff09;&#xff1a;node1/192.168.8.10 Elasticsearch Kibana Node2节点&#xff08;2C/4G&#xff09;&#xff1a;node2/192.168.8.11 Elasticsearch Apache节点&#xff1a;apache/192.168.8.13 …

2023年电赛---运动目标控制与自动追踪系统(E题)发挥题思路

前言 &#xff08;1&#xff09;因为博客编辑字数超过1W字会导致MD编辑器非常卡顿。所以我将发挥题和基础题的思路拆开了。 &#xff08;2&#xff09;更新日记&#xff1a; <1>2023年8月4日&#xff0c;9点20分。分离发挥题思路和基础题思路&#xff0c;增加了博主Huiye…

2020-2023中国高等级自动驾驶产业发展趋势研究

1.1 概念界定 2020-2023中国高等级自动驾驶产业发展趋势研究Trends in China High-level Autonomous Driving from 2020 to 2023自动驾驶发展过程中&#xff0c;中国出现了诸多专注于研发L3级以上自动驾驶的公司&#xff0c;其在业界地位也越来越重要。本报告围绕“高等级自动…

【雕爷学编程】MicroPython动手做(29)——物联网之SIoT 2

知识点&#xff1a;什么是掌控板&#xff1f; 掌控板是一块普及STEAM创客教育、人工智能教育、机器人编程教育的开源智能硬件。它集成ESP-32高性能双核芯片&#xff0c;支持WiFi和蓝牙双模通信&#xff0c;可作为物联网节点&#xff0c;实现物联网应用。同时掌控板上集成了OLED…

Java实现数据库表中的七种连接【Mysql】

Java实现数据库表中的七种连接【Mysql】 前言版权推荐Java实现数据库表中的七种连接左外连接右外连接其他连接 附录七种连接SQL测试Java测试转换方法类 Cla1类 Cla2类Cla3 最后 前言 2023-8-4 16:51:42 以下内容源自《【Mysql】》 仅供学习交流使用 版权 禁止其他平台发布时…

vue 混入(mixin)的使用

在 vue 组件内&#xff0c;如果想将一些公共功能&#xff0c;如组件、方法、钩子函数等复用&#xff0c;混入是一个很好的选择。 现在开始我们的混入使用吧 1、我们可以创建一个目录mixins&#xff0c;在创建一个comment.js文件如图&#xff1a; // 在 common.js 里写你想共享…

SQL 表别名 和 列别名

列表名 列表名之后 order by 可以用别名 也可以用原名&#xff0c; where 中不能用别名的 SQL语句执行顺序&#xff1a; from–>where–>group by -->having — >select --> order 第一步&#xff1a;from语句&#xff0c;选择要操作的表。 第二步&#xff1…

matlab编程实践18、19

浅水方程 浅水方程可以建立起海啸和浴缸中波浪的数学模型。浅水方程建立了水或者其它不可压缩液体受扰动时传播的模型。隐含的假设是&#xff0c;液体的深度和波浪的长度、扰动等相比是很小的。 在这样的记号下&#xff0c;浅水方程为双曲守恒定律的一个例子。 使用拉克斯-冯特…