微信小程序仿QQ头像轮播效果

1、效果图

Kapture 2024-02-28 at 11.09.35

2、效果流程分析

1、第1个头像大小从1到0缩小的同时,第2个头像左移

2、上面动画结束后,延迟50ms,第3个头像从0到1放大

3、把头像列表顺序前移一位,并重置轮播状态,以此达到一个循环。然后继续第一个步骤

3、源码

组件使用

<AvatarsBanner avatars="{{avatars}}" />

index.wxml

<viewclass="avatarList"style="width:{{itemWidth*3-overlapWidth*2}}rpx;"
><!-- 备注:微信小程序经测试,即使不渲染的元素也要添加到节点上,否则第3个的放大动画不会展示 --><imagesrc="{{item}}"animation="{{index===0?firstAnimation:(index===1?secondAnimation:(index===2?lastAnimation:''))}}"wx:for="{{avatars}}"wx:key="index"style="left: {{(itemWidth-overlapWidth)*index}}rpx; z-index: {{avatars.length-index}};width:{{itemWidth}}rpx;height:{{itemWidth}}rpx;"class="avatarImage {{index>2 && 'hidden'}}"/>
</view>

index.js

const animalTime = 200; // 动画时间
const intervalTime = 1000; // 定时器频率Component({properties: {// 头像列表avatars: {type: Array,value: [],observer(newVale) {this.interval && clearInterval(this.interval);this.startAnimation();},},style: {type: String,value: '',},// 图片宽度:rpxitemWidth: {type: Number,value: 36,},// 重叠部分宽度:rpxoverlapWidth: {type: Number,value: 10,},},data: {},methods: {startAnimation() {const { avatars } = this.data;const { itemWidth, overlapWidth } = this.properties;if (avatars.length < 3) {return;}// 创建animation对象this.firstAnimation = wx.createAnimation();this.secondAnimation = wx.createAnimation();this.lastAnimation = wx.createAnimation();this.interval = setInterval(() => {// num1缩放动画this.firstAnimation.scale(0).step({ duration: animalTime });this.setData({firstAnimation: this.firstAnimation.export(),});// num2、num3平移动画(除以2是rpx转px)const offsetX = (overlapWidth - itemWidth)/2;this.secondAnimation.translate(offsetX, 0).step({ duration: animalTime });this.lastAnimation.translate(offsetX, 0).step({ duration: animalTime });this.setData({secondAnimation: this.secondAnimation.export(),lastAnimation: this.lastAnimation.export(),});// num3放大动画(animalTime + 50:表示前面两个动画结束,并且setData数据更新)setTimeout(() => {this.lastAnimation.scale(1).step({ duration: animalTime });this.setData({lastAnimation: this.lastAnimation.export(),});}, animalTime + 50);// 还原动画 (等待缩小动画完成后再切换头像)setTimeout(() => {this.firstAnimation.scale(1).step({duration: 0,});this.secondAnimation.translate(0, 0).step({duration: 0,});this.lastAnimation.translate(0, 0).scale(0).step({duration: 0,});this.setData({avatars: avatars.slice(1).concat(avatars[0]),lastAnimation: this.lastAnimation.export(),firstAnimation: this.firstAnimation.export(),secondAnimation: this.secondAnimation.export(),});}, animalTime);}, intervalTime);},},
});

index.wxss

.avatarList {display: flex;flex-direction: row;position: relative;height: 100%;
}.avatarImage {position: absolute;border: 1rpx solid #ffffff;border-radius: 50%;/* 占位图 */background-image: url('https://xm-1301527776.cos.ap-shanghai.myqcloud.com/images/miniprogram/channel/Post/ic_default_header.png');background-repeat: no-repeat;background-position: center;background-color: #f6f6f6;background-size: cover;
}.hidden {display: none;
}

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

C++之虚函数表

一、概念 虚函数表是一个存在指向虚函数的指针数组&#xff0c;每一个带有虚函数的类都有一个虚函数表。虚函数表与虚函数一样是可以继承。这个表的每一个数组的值都是指向虚函数的指针。 二、虚函数表如何继承与重写 1、一个类继承另外一个带有虚函数的类&#xff0c;并且没…

【LeetCode】递归遍历 144.94.145 二叉树的前序遍历、中序遍历、后序遍历

今日学习的文章链接和视频链接 leetcode题目地址&#xff1a;144.二叉树的前序遍历 leetcode题目地址&#xff1a;94. 二叉树的中序遍历 leetcode题目地址&#xff1a;145. 二叉树的后序遍历 代码随想录题解地址&#xff1a;代码随想录 题目简介 给你二叉树的根节点 root &…

Java旋转矩阵

题目&#xff1a; 给你一幅由 N N 矩阵表示的图像&#xff0c;其中每个像素的大小为 4 字节。请你设计一种算法&#xff0c;将图像旋转 90 度。 不占用额外内存空间能否做到&#xff1f; 示例 1: 给定 matrix [ [1,2,3], [4,5,6], [7,8,9] ], 原地旋转输入矩阵&…

3.11笔记3

3.11知识点3 1. break 语句和 continue 语句有什么区别&#xff1f;2. 使用 goto 计算 1-23-4......99-100 的值。3. 输入一个整数&#xff0c;判断这个数是不是素数。4. 写程序生成前 100 个素数。56. (a) 对于一个大小为N的数组&#xff0c;它的下标范围是多少&#xff1f;7.…

wins10安装ffmpeg

官网下载 点击进入官网&#xff1a;ffmpeg&#xff0c;官网地址&#xff1a;https://ffmpeg.org/download.html 点击上图中Windows图标选中后下面显示的第一行进入如下界面&#xff0c;在release builds第一个绿框里面选择一个版本下载&#xff1a; 下载好之后解压后&#xf…

鸿蒙Harmony应用开发—ArkTS声明式开发(基础手势:PatternLock)

图案密码锁组件&#xff0c;以九宫格图案的方式输入密码&#xff0c;用于密码验证场景。手指在PatternLock组件区域按下时开始进入输入状态&#xff0c;手指离开屏幕时结束输入状态完成密码输入。 说明&#xff1a; 该组件从API Version 9开始支持。后续版本如有新增内容&#…

GO语言-切片底层探索(上)

目录 1.前言 2. 算法题目 错误代码 3. 错误分析 4.总结&#xff1a; 5.正确代码&#xff1a; 6.本地测试代码&#xff1a; 1.前言 今天在力扣上写算法&#xff0c;遇到了一个比较"奇怪"的错误。由于自己使用了递归切片&#xff0c;导致一开始没有看明白&…

力扣最热100题——56.合并区间

吾日三省吾身 还记得梦想吗 正在努力实现它吗 可以坚持下去吗 目录 吾日三省吾身 力扣题号&#xff1a;56. 合并区间 - 力扣&#xff08;LeetCode&#xff09; 题目描述 Java解法一&#xff1a;排序然后原地操作 具体代码如下 Java解法二&#xff1a;new一个list&#xf…

(delphi11最新学习资料) Object Pascal 学习笔记---第7章第1节(引入类和对象)

第7章 对象 ​ 即使你没有面向对象编程&#xff08;OOP&#xff09;的详细知识&#xff0c;本章也将介绍每一个关键概念。如果你已经精通OOP&#xff0c;你可以相对快速地浏览材料&#xff0c;并将重点放在Object Pascal语言的细节上&#xff0c;与你可能已经掌握的其他语言进…

分布式ID(7):Zookeeper实现分布式ID生成

1 原理 实现方式有两种,一种通过节点,一种通过节点的版本号 节点的特性持久顺序节点(PERSISTENT_SEQUENTIAL) 他的基本特性和持久节点是一致的,额外的特性表现在顺序性上。在ZooKeeper中,每个父节点都会为他的第一级子节点维护一份顺序,用于记录下每个子节点创建的先后顺序…

虚拟机中安装Win98

文章目录 一、下载Win98二、制作可启动光盘三、VMware中安装Win98四、Qemu中安装Win981. Qemu的安装2. 安装Win98 Win98是微软于1998年发布的16位与32位混合的操作系统&#xff0c;也是一代经典的操作系统&#xff0c;期间出现了不少经典的软件与游戏&#xff0c;还是值得怀念的…

Kafka - This server does not host this topic-partition

问题描述 org.apache.kafka.common.errors.UnknownTopicOrPartitionException: This server does not host this topic-partition 原因分析 分区数据不在。producer 向不存在的 topic 发送消息 解决方案 用户可以检查 topic 是否存在设置 auto.create.topics.enable 参数

【LiveVideoStack】批量下载公众号文章

livevideostack暂停商业运行 官方建议关注文章保存,因此: y9000p 上运行: xiaoguyu / wechatDownload 大神太厉害了,工具软件很好很强大 windows 试试直接安装、编译、运行 zhangbin@LAPTOP-DFV9CMRA MINGW64 /g/ISOFT/livevideostack $ git clone https://github.com/xiao…

安卓多个listView拖动数据交换位置和拖动

注意这里只是给出大概思路&#xff0c;具体可以参考修改自己想要的 public class MainActivity extends AppCompatActivity {private ListView listView1;private ListView listView2;private ArrayAdapter<String> adapter1;private ArrayAdapter<String> adapter…

研发效能DevOps: OpenEuler 部署 drone 持续集成平台

目录 一、实验 1.环境 2.OpenEuler 部署 drone 持续集成平台 二、问题 1.drone登录失败 一、实验 1.环境 &#xff08;1&#xff09;主机 表1 主机 系统架构版本IP备注LinuxopenEuler22.03 LTS SP2 192.168.204.145&#xff08;动态&#xff09; 192.168.204.141&…

jenkins容器中安装python遇到问题

在Jenkins容器中安装配置Python时遇到问题 执行./configure --prefix/opt/python3/时遇到configure: error: no acceptable C compiler found in $PATH 这个问题就是缺少gcc编译环境。将gcc安装上即可&#xff1a; yum install -y gcc##前提是容器里的系统是cenos才可以&#…

`sh -c`命令——解决命令权限问题、一条命令中执行多个指令

sh -c在Shell中执行一个字符串作为命令&#xff0c;可以在一条命令中执行多个指令。 目录 语法如下&#xff1a;案例 使用sh -c与直接终端敲命令的区别使用sh -c解决命令权限问题 语法如下&#xff1a; sh -c command其中&#xff0c;command是要执行的命令或命令串。 案例 …

Excel下拉自动填充

1、选中需要下拉填充的单元格&#xff0c;按下Ctrl&#xff0c;然后再往下拖动填充。 下拉结果&#xff1a; 2、选中两个连续的单元格&#xff0c;往下拖动填充&#xff0c;可以填充增加两数差。 下拉结果&#xff1a; 本文为学习笔记&#xff0c;所参考文章均已附上链接&#…

【Node.js从基础到高级运用】六、创建第一个 Node.js 应用

创建第一个 Node.js 应用 在这一节中&#xff0c;我们将引导你创建你的第一个 Node.js 应用——一个简单的 “Hello World” 程序。这将帮助你熟悉 Node.js 项目的基本结构和模块化编程的概念。 步骤 1: 初始化项目 首先&#xff0c;创建一个新的目录作为项目的根目录&#…

设计模式前置了解uml图

在开发前&#xff0c;会进行系统的设计&#xff0c;而数据模型的设计大多通过 UML 类图实现。为了在 UML 类图中清晰地表达类之间的关系&#xff0c;需要对类之间的关系有一定的认识&#xff0c;并且了解相关的表达符号。 类之间的关系有以下几种&#xff1a; 组合 聚合 关联…