微信小程序动画组件（全图图标导航，下部弹出导航，左滑修改删除）

2024-02-19 22:40
文章标签 程序 组件 微信 删除 修改 动画 图标 导航 左滑 下部 全图

本文主要是介绍微信小程序动画组件（全图图标导航，下部弹出导航，左滑修改删除），希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

所谓动画，可以用animation或者transition两种方式实现。

 

在CSS中，@keyframes根据你定义的样式规则来更有效的控制动画队列中的每一个中间步骤（或者每一个路径点）。用@keyframes来制定动画规则会比使用transition(过渡)来获得更细腻更全面的动画效果。

  • 并且现在网络上有非常多开源的CSS3动态库，可以下载源码，直接用！！！是真的，只需要把大神写好的@keyframes直接复制到css里，然后在animation中使用对应的动画名，就能直接用了！！！

  • 那咱们先来了解下@keyframes是个什么东西吧

@keyframes slidein { from { margin-left: 100%; width: 300%; }to { margin-left: 0%; width: 100%; } }
  • from为开头帧
  • to为结束帧

我们一般都采用简写的形式，一行代码将animation所有我们需要的属性设置好

@keyframes duration | timing-function | delay | iteration-count | direction | fill-mode | play-state | name

如：

animation: 3s ease-in 1s 2 reverse both paused slidein;

 

那么animation以及transition动画在微信小程序中能得到什么样的运用呢？

接下来我将拿我在开源小程序组件库ColorUI中贡献的三个动画组件例子来展示一下

 

一、全图图标导航

JS

  data: {// 全屏图标导航showFullNavigation: false,navigation1: [{ name: 'Color UI', src: '/images/icon.jpg' },{ name: 'Color UI', src: '/images/icon.jpg' },{ name: 'Color UI', src: '/images/icon.jpg' },{ name: 'Color UI', src: '/images/icon.jpg' },{ name: 'Color UI', src: '/images/icon.jpg' },{ name: 'Color UI', src: '/images/icon.jpg' },{ name: 'Color UI', src: '/images/icon.jpg' },{ name: 'Color UI', src: '/images/icon.jpg' },],},clickFullNavigation: function () {this.setData({showFullNavigation: !this.data.showFullNavigation}) },

 HTML

  • 将bindtap的触发函数放在最外层，这样当出现遮罩层时，点击任意地方都可以取消，而不用专门去点一个小小的关闭按钮。
<view bindtap='clickFullNavigation'><view class="fullBox {{showFullNavigation ? 'fullBox-active':''}}'"><view class="nav-item-box" bindtap='gotoAdd'><view wx:for="{{navigation1}}"><image class="nav-item" src="{{item.src}}"/><text class='append'>{{item.name}}</text></view></view></view>
</view>

CSS

  • 用@keyframes 的from（0%）和to（100%）以及各种属性来定义animation动画，然后在css中使用animation：动画持续时间 | 动画名。
  • transform是用来设置最开始样式的偏移，transform: translateX(1000rpx);是指沿着X轴偏移1000rpx，已经在屏幕之外了，transform: translateX(0);指的是偏移为0，即原本应该在的位置。就可以出现从外面到正中央，然后再正中央，退场这样的动画了。
/* 全屏图标导航部分 */
.fullBox{position: fixed;width: 100%;background: #ffffff;height: 100%;top: 0;left: 0;right: 0;bottom: 0;z-index: 3;transform: translateX(1000rpx);animation: 0.5s spaceOutLeft;
}
.fullBox-active{transform: translateX(0);animation: 0.5s spaceInRight;
}
@keyframes spaceOutLeft {0% {opacity: 1;-webkit-transform-origin: 0% 50%;transform-origin: 0% 50%;-webkit-transform: scale(1) translate(0%, 0%);transform: scale(1) translate(0%, 0%);}100% {opacity: 0;-webkit-transform-origin: 0% 50%;transform-origin: 0% 50%;-webkit-transform: scale(.2) translate(-200%, 0%);transform: scale(.2) translate(-200%, 0%);}
}
@keyframes spaceInRight {0% {opacity: 0;-webkit-transform-origin: 100% 50%;transform-origin: 100% 50%;-webkit-transform: scale(.2) translate(200%, 0%);transform: scale(.2) translate(200%, 0%);}100% {opacity: 1;transform: translateY(0);-webkit-transform-origin: 100% 50%;transform-origin: 100% 50%;-webkit-transform: scale(1) translate(0%, 0%);transform: scale(1) translate(0%, 0%);}
}

二、下部弹出导航

  • 优点同上，感慨一下，flex布局真是个好东西，还不了解的同学可以多补补基础，可以看看阮一峰的教程
  • http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html

JS

  data: {// 下部弹出导航showBottomNavigation: false,navigation2: [{ name: 'Color UI', src: '/images/icon.jpg' },{ name: 'Color UI', src: '/images/icon.jpg' },{ name: 'Color UI', src: '/images/icon.jpg' },{ name: 'Color UI', src: '/images/icon.jpg' },],},clickBottomNavigation: function () {this.setData({showBottomNavigation: !this.data.showBottomNavigation})},

HTML

<view bindtap='clickBottomNavigation'><view class="chooseBox {{showBottomNavigation ? 'chooseBox-active':''}}'"><view class="nav-item-box" bindtap='gotoAdd'><view wx:for="{{navigation2}}"><image class="nav-item" src="{{item.src}}"/><text class='append'>{{item.name}}</text></view></view></view><view class="chooseMask"  wx:if="{{showBottomNavigation}}"></view>
</view>

CSS

/* 下部弹出导航部分 */
.chooseMask{display: flex;width: 100%;height: 100%;background: rgba(0,0,0,0.7);position: fixed;top: 0;left: 0;right: 0;bottom: 0;z-index: 2;
}
.chooseBox{border-radius: 30rpx;position: fixed;bottom: -20rpx;width: 100%;background: #ffffff;height: 340rpx;transform: translateY(340rpx);transition: all 0.4s;z-index: 3;
}
.chooseBox-active{transform: translateY(0);transition: all 0.4s;z-index: 3;
}
.nav-item-box{display: flex;flex-wrap: wrap;
}
.nav-item{margin-top: 60rpx;display: block;height: 125rpx;width: 125rpx;
}
.append{display: flex;justify-content: center;
}

三、左滑进行修改删除

  • JS的监听左滑的函数可以照搬，不用深究
  • css同样采用的是transform初始偏移，然后滑动触发函数，使得偏移复位的过程。
  • transition:all 0.4s;控制的是这个偏移动画持续的时间为0.4s

JS

  data: {// 左滑删除部分的jsshowLeftScroll:false,startX: 0, startY: 0,fakeDatas: [{title:'向左滑动，查看效果',},],},clickLeftScroll: function () {this.setData({showLeftScroll: !this.data.showLeftScroll})},modify: function () {wx.showToast({title: '修改成功',})},del: function () {wx.showModal({title: '提示',content: '确定要删除这条信息？',success: function (res) {wx.showToast({title: '删除成功',})}})},// 左滑删除部分的jstouchstart: function (e) {//开始触摸时 重置所有删除this.data.fakeDatas.forEach(function (v, i) {if (v.isTouchMove)//只操作为true的v.isTouchMove = false;})this.setData({startX: e.changedTouches[0].clientX,startY: e.changedTouches[0].clientY,fakeDatas: this.data.fakeDatas})},//滑动事件处理touchmove: function (e) {var that = this,index = e.currentTarget.dataset.index,//当前索引startX = that.data.startX,//开始X坐标startY = that.data.startY,//开始Y坐标touchMoveX = e.changedTouches[0].clientX,//滑动变化坐标touchMoveY = e.changedTouches[0].clientY,//滑动变化坐标//获取滑动角度angle = that.angle({ X: startX, Y: startY }, { X: touchMoveX, Y: touchMoveY });that.data.fakeDatas.forEach(function (v, i) {v.isTouchMove = false//滑动超过30度角 returnif (Math.abs(angle) > 30) return;if (i == index) {if (touchMoveX > startX) //右滑v.isTouchMove = falseelse //左滑v.isTouchMove = true}})//更新数据that.setData({fakeDatas: that.data.fakeDatas})},// 计算滑动角度angle: function (start, end) {var _X = end.X - start.X,_Y = end.Y - start.Y//返回角度 /Math.atan()返回数字的反正切值return 360 * Math.atan(_Y / _X) / (2 * Math.PI);},
})

HTML

<view wx:if="{{showLeftScroll}}" wx:for="{{fakeDatas}}" wx:key="{{index}}" class="touch-item {{item.isTouchMove ? 'touch-move-active' : ''}}" data-index="{{index}}" bindtouchstart="touchstart" bindtouchmove="touchmove"><view class="content"><text>{{item.title}}</text></view><view class="dele" bindtap="modify" >修改</view><view class="dele" style='background-color:#c95b54;' bindtap="del">删除</view>
</view>

CSS

/* 左滑删除部分 */
.touch-item { display: flex; justify-content: space-between; width: 100%; overflow: hidden;  box-sizing: border-box;margin: 20rpx 0 6rpx 0;background: #ffffff;}
.content { height: 200rpx;width: 100%; -webkit-transition: all 0.4s;transition: all 0.4s;-webkit-transform: translateX(220rpx);transform: translateX(220rpx); background: #ffffff;margin: 30rpx 30rpx 30rpx -220rpx;padding: 30rpx;font-size: 50rpx;display: flex;align-items: center;justify-content: center;}
.touch-move-active .content,.touch-move-active .dele { -webkit-transform: translateX(0);transform: translateX(0);}
.dele {background-color: #4479b2; width: 220rpx; display: flex;flex-direction: column;align-items: center;justify-content: center; color: #fff;-webkit-transform: translateX(440rpx);transform: translateX(440rpx);-webkit-transition: all 0.4s;transition: all 0.4s;
}
.feed-item{width: 690rpx;padding: 30rpx 30rpx 10rpx 30rpx;margin: 8rpx 0 6rpx 0;background: #ffffff;
}

github地址：https://github.com/JasonLam0990/ColorUI

这篇关于微信小程序动画组件（全图图标导航，下部弹出导航，左滑修改删除）的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！


http://www.chinasem.cn/article/726221。

相关文章

python获取指定名字的程序的文件路径的两种方法

python获取指定名字的程序的文件路径的两种方法

《python获取指定名字的程序的文件路径的两种方法》本文主要介绍了python获取指定名字的程序的文件路径的两种方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要... 最近在做项目，需要用到给定一个程序名字就可以自动获取到这个程序在Windows系统下的绝对路径，以下
阅读更多...
Vue和React受控组件的区别小结

Vue和React受控组件的区别小结

《Vue和React受控组件的区别小结》本文主要介绍了Vue和React受控组件的区别小结,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学... 目录背景React 的实现vue3 的实现写法一：直接修改事件参数写法二：通过ref引用 DOMVu
阅读更多...
MySQL 数据库表操作完全指南:创建、读取、更新与删除实战

MySQL 数据库表操作完全指南:创建、读取、更新与删除实战

《MySQL数据库表操作完全指南:创建、读取、更新与删除实战》本文系统讲解MySQL表的增删查改（CURD）操作,涵盖创建、更新、查询、删除及插入查询结果,也是贯穿各类项目开发全流程的基础数据交互原... 目录mysql系列前言一、Create(创建)并插入数据1.1 单行数据 + 全列插入1.2 多行数据
阅读更多...
基于Python编写自动化邮件发送程序(进阶版)

基于Python编写自动化邮件发送程序(进阶版)

《基于Python编写自动化邮件发送程序(进阶版)》在数字化时代,自动化邮件发送功能已成为企业和个人提升工作效率的重要工具,本文将使用Python编写一个简单的自动化邮件发送程序,希望对大家有所帮助... 目录理解SMTP协议基础配置开发环境构建邮件发送函数核心逻辑实现完整发送流程添加附件支持功能实现htm
阅读更多...
C#控制台程序同步调用WebApi实现方式

C#控制台程序同步调用WebApi实现方式

《C#控制台程序同步调用WebApi实现方式》控制台程序作为Job时,需同步调用WebApi以确保获取返回结果后执行后续操作,否则会引发TaskCanceledException异常,同步处理可避免异... 目录同步调用WebApi方法Cls001类里面的写法总结控制台程序一般当作Job使用，有时候需要控制
阅读更多...
mybatisplus的逻辑删除过程

mybatisplus的逻辑删除过程

《mybatisplus的逻辑删除过程》：本文主要介绍mybatisplus的逻辑删除过程,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教... 目录myBATisplus的逻辑删除1、在配置文件中添加逻辑删除的字段2、在实体类上加上@TableLogic3、业务层正常删除即
阅读更多...
MybatisPlus中removeById删除数据库未变解决方案

MybatisPlus中removeById删除数据库未变解决方案

《MybatisPlus中removeById删除数据库未变解决方案》MyBatisPlus中,removeById需实体类标注@TableId注解以识别数据库主键,若字段名不一致,应通过value属... 目录MyBATisPlus中removeBypythonId删除数据库未变removeById(Se
阅读更多...
Olingo分析和实践之OData框架核心组件初始化(关键步骤)

Olingo分析和实践之OData框架核心组件初始化(关键步骤)

《Olingo分析和实践之OData框架核心组件初始化(关键步骤)》ODataSpringBootService通过初始化OData实例和服务元数据,构建框架核心能力与数据模型结构,实现序列化、URI... 目录概述第一步：OData实例创建1.1 OData.newInstance() 详细分析1.1.1
阅读更多...
MySQL逻辑删除与唯一索引冲突解决方案

MySQL逻辑删除与唯一索引冲突解决方案

《MySQL逻辑删除与唯一索引冲突解决方案》本文探讨MySQL逻辑删除与唯一索引冲突问题,提出四种解决方案：复合索引+时间戳、修改唯一字段、历史表、业务层校验,推荐方案1和方案3,适用于不同场景,感兴... 目录问题背景问题复现解决方案解决方案1.复合唯一索引 + 时间戳删除字段解决方案2：删除后修改唯一字
阅读更多...
Spring Boot 结合 WxJava 实现文章上传微信公众号草稿箱与群发

Spring Boot 结合 WxJava 实现文章上传微信公众号草稿箱与群发

《SpringBoot结合WxJava实现文章上传微信公众号草稿箱与群发》本文将详细介绍如何使用SpringBoot框架结合WxJava开发工具包,实现文章上传到微信公众号草稿箱以及群发功能,... 目录一、项目环境准备1.1 开发环境1.2 微信公众号准备二、Spring Boot 项目搭建2.1 创建
阅读更多...

Copyright China编程 23002807@qq.com

沪ICP备2023033072号-2