微信小程序仿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

<view
  class="avatarList"
  style="width:{{itemWidth*3-overlapWidth*2}}rpx;"
>
  <!-- 备注:微信小程序经测试,即使不渲染的元素也要添加到节点上,否则第3个的放大动画不会展示 -->
  <image
    src="{{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: '',
    },
    // 图片宽度:rpx
    itemWidth: {
      type: Number,
      value: 36,
    },
    // 重叠部分宽度:rpx
    overlapWidth: {
      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;
}

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

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

相关文章

STL——map set

文章将解决一下几个问题&#xff1a; 1.什么是set 2.什么是map 3.set应用场景 4.map应用场景 序列式容器和关联式容器 数据结构有序列式容器和关联式容器&#xff0c;序列式容器一般有vector,list,deque…&#xff0c;但关联式容器中就有map&#xff0c;关联式容器也是用来存…

Java实现知乎热点小时榜爬虫

1.效果演示 1.1 热点问题列表 启动程序后&#xff0c;自动展示热点问题&#xff0c;并等待终端输入 1.2 根据序号选择想看的热点问题 输入问题序号&#xff0c;展示回答内容 1.3 退出 输入q即可退出程序 2.源码 2.1 pom.xml <?xml version"1.0" enco…

鸿蒙Harmony应用开发—ArkTS声明式开发(容器组件:FlowItem)

瀑布流组件的子组件&#xff0c;用来展示瀑布流具体item。 说明&#xff1a; 该组件从API Version 9开始支持。后续版本如有新增内容&#xff0c;则采用上角标单独标记该内容的起始版本。仅支持作为Waterflow组件的子组件使用。 子组件 支持单个子组件。 接口 FlowItem() 使…

[数据集][目标检测]零售柜零食检测数据集VOC+YOLO格式5422张113类

数据集格式&#xff1a;Pascal VOC格式YOLO格式(不包含分割路径的txt文件&#xff0c;仅仅包含jpg图片以及对应的VOC格式xml文件和yolo格式txt文件) 图片数量(jpg文件个数)&#xff1a;5422 标注数量(xml文件个数)&#xff1a;5422 标注数量(txt文件个数)&#xff1a;5422 标注…

html5cssjs代码 018颜色表

html5&css&js代码 018颜色表 一、代码二、效果三、解释 这段代码展示了一个基本的颜色表&#xff0c;方便参考使用&#xff0c;同时也应用了各种样式应用方式。 一、代码 <!DOCTYPE html> <html lang"zh-cn"> <head><title>编程笔记…

Redis开发规范与性能优化(二)

开发规范与性能优化 3.客户端使用 1.【推荐】避免多个应用使用一个Redis示例 正例:不相干的业务拆分&#xff0c;公共数据库做服务化 2.【推荐】使用带有连接池的数据库&#xff0c;可以有效控制链接&#xff0c;同时提高效率&#xff0c;标准使用方式如代码所示 public c…

AMD芯片使用Stable-Diffusion

AMD芯片使用Stable-Diffusion 由于A卡的Stable Diffusion工具的逐步完善&#xff0c;之前只能使用CPU跑&#xff0c;现在已支持AMD显卡进行AI绘图。 下载 官网链接&#xff1a;https://github.com/AUTOMATIC1111/stable-diffusion-webui/wiki/Install-and-Run-on-AMD-GPUs 按…

LAMP网站部署(Discuz论坛网站部署)

目录 mysql命令 语法 选项 参数 实例 安装php 安装Mariadb 关掉防火墙和selinux 启动HTTP服务 初始化数据库 查看数据库是否创建成功 修改HTTP的配置文件 浏览器打开 将以下所有目录都加上权限 最后首页效果 mysql命令 是MySQL数据库服务器的客户端工具&#xff0c;它工作在命…

【Linux下qt软件安装打包附带问题: dpkg: error processing package xxxx +解决方式+自我尝试+记录】

【Linux下qt软件安装打包附带问题&#xff1a; dpkg: error processing package xxxx 解决方式自我尝试记录】 1、前言2、实验环境3、问题说明4、我的努力与查到解决的方式&#xff08;1&#xff09;补充两个文件&#xff0c;让软件正常执行&#xff08;2&#xff09;尝试修复d…

springboot+vue学生选课系统 java+ssm+idea+_mysql

系统包含三种角色&#xff1a;管理员、老师、学生&#xff0c;系统分为前台和后台两大模块&#xff0c;主要功能如下。 ide工具&#xff1a;IDEA 或者eclipse 编程语言: java 学生网上选课系统可以实现教室管理&#xff0c;老师管理&#xff0c;课程管理&#xff0c;教学计划管…

为什么我接不到大单?

以前的领导创业多年&#xff0c;今天找我聊了一下想让我跟他一起做点事情&#xff0c;聊了一下我的现状&#xff0c;突然让我明白为何我一直都接不到大单了 说起来也不是完全没有好的机会&#xff0c;貌似有点像“公交车定律”&#xff0c;当我很忙碌的时候订单一个接一个&…

闯关升级游戏特点,闯关小程序游戏开发

闯关升级类游戏一直以来都备受玩家青睐&#xff0c;其独特的游戏性和吸引力让人们乐此不疲。这类游戏以挑战性关卡和角色成长为核心&#xff0c;让玩家在不断的冒险中获得成就感与乐趣。让我们一起深入探讨这类游戏的特点&#xff0c;以及为何它们如此受欢迎。 挑战性关卡设计…

C语言中内存函数的使用

memcpy函数的使用和模拟实现 memcpy的使用 函数使用说明&#xff1a; • 函数memcpy从source的位置开始向后复制num个字节的数据到destination指向的内存位置。 • 这个函数在遇到 \0 的时候并不会停下来。 • 如果source和destination有任何的重叠&#xff0c;复制的结…

提升数据分析效率,选择IBM SPSS Statistics专业统计分析软件

在当今信息爆炸的时代&#xff0c;数据已经成为决策的重要依据。对于研究人员、学者、企业管理者等群体来说&#xff0c;如何高效地进行数据分析并得出准确结论至关重要。而IBM SPSS Statistics作为一款专业统计分析软件&#xff0c;为用户提供了强大的工具和功能&#xff0c;助…

【SQL】1084. 销售分析III (多种解法;is null 和 =null 的区别图示 )

前述 知识点学习&#xff1a;MySQL 中 is null 和 null 的区别 题目描述 leetcode题目&#xff1a; 1084. 销售分析III 写法一 思路&#xff1a;“所有售出日期都在这个时间内”&#xff0c;也就是“在这个时间内售出的商品数量等于总商品数量” -- 解法1&#xff1a;ACCE…

【深度学习】diffusers 学习过程记录,StableDiffusion扩散原理

教程地址&#xff1a;https://huggingface.co/docs/diffusers/quicktour 文章目录 环境扩散模型噪声残差的作用原理&#xff0c;文字编码如何给入Unetschedulerguidance_scalescheduler.init_noise_sigma训练时候的反向传播 环境 python3.10安装环境&#xff1a; pip install…

Gitee配置SSH登录

一、背景 新入手的电脑&#xff0c;需要对Gitee上存放的项目进行更改上传&#xff0c;发现上传不了需要登录&#xff0c;便采用SSH密钥进行登录&#xff0c;防止远程管理工程中的信息泄露 二、前提 电脑已下载Git Bash工具&#xff0c;在项目下点击鼠标右键&#xff0c;进入…

halconOCR文字识别

1、OCR文字识别 FontFile : Universal_0-9_NoRej dev_update_window (off) read_image (bottle, bottle2) get_image_size (bottle, Width, Height) dev_open_window (0, 0, Width, Height, black, WindowHandle) set_display_font (WindowHandle, 16, mono, true, false) dev…

适用于系统版本:CentOS 6/7/8的基线安全检测脚本

#!/bin/bash #适用于系统版本&#xff1a;CentOS 6/7/8 echo "----------------检测是否符合密码复杂度要求----------------" #把minlen&#xff08;密码最小长度&#xff09;设置为8-32位&#xff0c;把minclass&#xff08;至少包含小写字母、大写字母、数字、特殊…

JVM及垃圾回收算法

一、JVM 1、jvm的内存组成 五大内存区域&#xff0c;分1.7和1.8 1.堆内存&#xff1a;引用类型的数据&#xff0c;内部组成&#xff1a;1.新生代&#xff08;伊甸区和幸存者区&#xff09;2.老年代。该区域经常发生垃圾回收的操作 堆是JVM中最大的一块内存区域&#xff0c;用…