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

最新推荐文章于 2024-07-04 18:41:45 发布
置顶 最新推荐文章于 2024-07-04 18:41:45 发布
阅读量6.4k 收藏 21
点赞数 5
分类专栏： 微信小程序 ccs 文章标签： css3 animation 微信小程序动画 微信小程序 微信小程序导航
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_38485842/article/details/81394862
版权

所谓动画，可以用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%);
  }
}

二、下部弹出导航

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: {
    // 左滑删除部分的js
    showLeftScroll: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: '删除成功',
        })
      }
    })
  },

  // 左滑删除部分的js

  touchstart: 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度角 return
      if (Math.abs(angle) > 30) return;
      if (i == index) {
        if (touchMoveX > startX) //右滑
          v.isTouchMove = false
        else //左滑
          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

Joox
关注
专栏目录
微信小程序开发中的动画效果和页面过渡
m0_75244442的博客
08-12 371
总结： 动画效果和页面过渡是微信小程序开发中重要的组成部分，可以通过wx.createAnimation()方法创建动画实例，并通过一系列的方法和属性来控制动画的效果和行为。本文将通过详细的代码案例来介绍微信小程序中常见的动画效果和页面过渡的实现方法。一、动画效果 在微信小程序中，可以通过wx.createAnimation()方法创建动画实例，并通过一系列的方法和属性来控制动画的效果和行为。二、页面过渡 在微信小程序中，页面过渡是指页面之间的切换效果。方法将动画数据导出，并绑定到页面的data中。
微信小程序动画组件使用解析，类似vue，且更强大
12-11
演示 演示1 演示2 演示3   一、功能描述 1、预设过渡 支持区分enter、leave 支持预设过渡的组合 特别强调:支持元素展开、闭合的过渡。name==’slide’或[‘slide'[,]]，即可实现，无需外部传height 支持外部传类来过渡或动画 /* 预留过渡 */ /** *1、fade *2、移动:up,right,down,left四个方向 *3、scale缩放：默认是从0->1，还预设了一个从1->1.2的 *4、rotate旋转。顺时针旋转。角度用以上方向来指示。如果逆时针中间加上reserve。 如rotate-right表示选择180度，
《微信小程序-进阶篇》Lin-ui组件库源码分析-动画组件Transition（一）
Oliver尹的博客
08-04 1122
本文难度属于：初中级，通过本文你可以了解到 Lin-ui的Transition组件的使用以及如何实际应用在我们的项目中，之后我们才开始针对各个属性分析其源码是如何实现的
微信小程序开屏动画组件封装以及使用示例
ITzhongzi的博客
05-14 3204
思路 首先调用wx.hideTabbar() 隐藏微信小程序的tabbar 封装一个开屏动画组件，在几秒后自动关闭 在关闭的时候调用 wx.showTabber();来使tabbar显示出来 效果展示 git仓库地址 git仓库地址 https://github.com/MrITzhongzi/small_routine_components.git 示例目录结构 核心代码 kaiping_component.wxml <view class="kaiping_box"> &lt
微信小程序收藏按钮五角星星图标动画效果实现
php全栈程序员，小李子9479。编程培训，提供产品级插件，
10-01 6226
先上个效果图： wxml文件比较简单，就一个图片，如下 &lt;image src="{{imgurl}}" style="width:100px;height:100px;" bindtap="et_submit" animation="{{dhdata}}"&gt;&lt;/image&gt; 其中imgurl是图片的地址，正常状态是灰色空的，收藏成功后变成黄色实心的，再点击就变成
微信小程序Canvas动画库
08-10
本项目是为一套简单的小程序动画库 整体实现参考的cocos，API设置参考了cocos和laya 目前只支持本地图片和label渲染，后面有空再添加
微信小程序demo组件：canvas股票分时图(源代码+截图)
06-19
微信小程序demo组件：canvas股票分时图(源代码+截图)微信小程序demo组件：canvas股票分时图(源代码+截图)微信小程序demo组件：canvas股票分时图(源代码+截图)微信小程序demo组件：canvas股票分时图(源代码+截图)微信...
微信小程序自定义头部导航栏和导航栏背景图片 navigationStyle问题
10-16
在微信小程序开发中，有时我们需要对默认的头部导航栏进行自定义，以满足特定的设计需求。本篇文章将详细介绍如何实现微信小程序自定义头部导航栏和导航栏背景图片，以及处理与`navigationStyle`相关的技术问题。 ...
微信小程序MUI侧滑导航菜单示例(Popup弹出式,左侧不动，右侧滑动)
10-17
MUI侧滑导航菜单可以实现当用户在微信小程序页面上从右侧向左侧滑动时，右侧内容区滑动而左侧菜单保持不动，这种效果被称作“Popup弹出式”。实现这种效果，需要开发者对微信小程序的页面布局、事件处理有深入理解。...
微信小程序 基础组件与导航组件详细介绍
08-31
在微信小程序开发中，基础组件和导航组件是构建用户界面不可或缺的部分。这些组件提供了丰富的功能，使得开发者能够创建出各种各样的交互体验。下面将详细阐述这两个方面的内容。 ### 1. 基础组件 #### 1.1 图标...
微信小程序使用modal组件弹出对话框功能示例
01-19
本文实例讲述了微信小程序使用modal组件弹出对话框功能。分享给大家供大家参考，具体如下： 1、效果展示 2、关键代码 ①、index.wxml 提示：{{tip}} <button type=default bindtap=showModal>点击我弹出...
微信小程序重复动画
02-21
微信小程序 重复动画 重复旋转源码 简洁 适用初学者微信小程序 重复动画 重复旋转源码 简洁 适用初学者
小程序封装加载动画_小程序加载动画
2401_84187563的博客
04-12 665
在需要用到加载动画的地方，通过调用App.js中的showLoading方法显示Loading动画，并在数据加载完毕后调用hideLoading方法关闭Loading动画。封装全局加载动画的核心思路就是在每个页面加载数据时弹出加载动画，在数据加载完成后关闭动画。由于需要在所有页面中使用，我们需要将加载动画封装成一个全局组件，供所有页面调用。在App.js中加载自定义组件Loading，并设定全局方法showLoading和hideLoading来显示和隐藏Loading组件。
小程序封装加载动画
2303_76218115的博客
04-10 1683
在小程序的开发中，页面的加载过程可能会因为网络状况的不好或数据量的过大而显得非常缓慢，这时候加上一个加载动画就能有效的缓解用户的等待焦虑感。而对于应用的多个页面来说，使用全局加载动画可以提高用户体验，让应用显得更加美观和专业。本篇技术分享博客将为大家介绍在小程序中封装全局加载动画的具体实现步骤，帮助您提高小程序的用户体验。通过上述步骤，我们就完成了小程序中封装全局加载动画的具体实现方法。在实际开发中，我们可以根据实际需求对组件样式和方法进行调整和修改，以满足不同的开发需求。
小程序 翻转， 左侧滑入， 缩小变大消失等等特效
Johnny Liao的博客
04-25 9714
1，缩小变大消失特效： //js data: { animationData: null }, ani_smallbigOut: function(){ let that = this console.log("animate") var animation = wx.createAnimation({ duration: 750, ...
微信小程序－列表项左滑删除效果
qq_35633723的博客
12-10 591
实现思路： 每一个列表项由两个层组成，文本层与按钮层； 触摸滑动时计算手指移动距离，文本层跟随手指移动； 手指移动距离大于按钮宽度一半时，显示按钮，反之，不显示； 缓动动画用css3属性transition控制；transition: left 0.2s ease-in-out; 代码 代码比较简单，详细实现看注释，就直接贴代码了。 index.wxml &amp;lt;view ...
微信小程序实现图标闪烁动画效果
最新发布
jkjbvvb的博客
07-04 960
通过上述步骤，你已经成功地在微信小程序中实现了图标闪烁动画效果。这种动画不仅能够吸引用户的注意力，还可以在不同的场景中传达特定的信息，比如加载状态或警告提示。我们将在项目中创建一个新的页面，用于展示动画效果。定义了动画的关键帧，图标在0%和100%时完全可见（不透明度为1），在50%时不可见（不透明度为0）。通过实践和深入学习，你将能够创建出更加复杂和吸引人的动画效果，进一步提升你的微信小程序开发技能。保存更改后，在微信开发者工具中预览你的小程序，你应该能看到图标正在以1秒的周期进行闪烁。
小程序弹出弹框隐藏底部导航反之出现
゛Pudding
10-26 665
<view class="fabu" bindtap="showModals" data-target="bottomModal"> <image src="../../images/home/fabu.png"></image> </view> <view class="cu-modal bottom-modal {{modalName=='bottomModal'?'show':''}}" bindtap="hideModals">
微信小程序系列七：删除列表数据
热门推荐
stp_zsj的博客
08-17 1万+
wxml: &lt;view&gt; &lt;block wx:for="{{list}}" wx:key='id'&gt; &lt;view class='list'&gt; &lt;view class='left'&gt;{{item.name}}&lt;/view&gt; &lt;view class='right' data-index='{{in..
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值