Loading [MathJax]/jax/output/CommonHTML/config.js
前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >专栏 >小程序X轴渐入动画组件

小程序X轴渐入动画组件

作者头像
前端_AWhile
发布于 2022-05-10 13:44:08
发布于 2022-05-10 13:44:08
75800
代码可运行
举报
文章被收录于专栏:前端一会前端一会
运行总次数:0
代码可运行

先定义小程序中要施加渐入动画的DOM元素,注意该元素的css样式里要添加下opaction属性,通常设为0,意为从全透明开始渐入。另外还需要根据实际场景设定该元素的leftright值,以供动画方法定义滑动距离。

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
<view class="animation-class" animation="slideleft">向左滑入渐入动画DOM元素</view>

定义小程序内公共动画方法

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
// animation.js
/**
 * X轴滑动渐入动画
 */
function fadeXAnimation( _this, param, px, opacity ){
  let animation = wx.createAnimation({
    duration: 800,
    timingFunction: "ease"
  })
  animation.translateX( px ).opacity( opacity ).step();
  // 将param转换为key
  let json = '{"'+ param +'":""}';
  json = JSON.parse( json );
  json[param] = animation.export();
  // 设置动画
  _this.setData( json );
}

module.exports = {
  fadeXAnimation: fadeXAnimation
}

业务代码js中引入公共动画方法js文件,并选择符合自身业务场景的地方调用动画方法,这里我选择onshow生命周期内执行动画方法,另外也可以将该方法放到定时器中延时执行或在wx.createAnimation方法中定义delay延时。

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
// index.js
const animation = require('../../utils/tools/animation.js')

onshow(){
    animation.fadeXAnimation(this, "slide_left_locks", -100, 1);
}

可以在此基础上,添加Y轴渐入、渐出等动画。微信小程序动画API还支持旋转、放大等,方法的套路都差不多。

本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2019-05-07,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
暂无评论
推荐阅读
编辑精选文章
换一批
小程序-渐入渐出动画效果实现
在做小程序列表展示的时候,接到了一个需求。需要在列表展示的时候加上动画效果。在此献上小程序动画效果的教程。
腾讯NEXT学位
2019/08/12
3.2K0
小程序-渐入渐出动画效果实现
微信小程序:动画(Animation)
官方文档是这样说的:①创建一个动画实例 animation。②调用实例的方法来描述动画。③最后通过动画实例的 export 方法导出动画数据传递给组件的 animation 属性。
FlyLolo
2018/11/29
9.8K0
微信小程序:动画(Animation)
小程序-实现自定义动画弹框/提示框
在小程序中,用户与界面进行交互时,有一些用户反馈提示,例如:触发某个按钮,从底部弹出框,从顶部弹出等
itclanCoder
2020/11/06
1.8K0
两种方案开发小程序动画
在普通的网页开发中,动画效果可以通过css3来实现大部分需求,在小程序开发中同样可以使用css3,同时也可以通过api方式来实现。
用户2356368
2019/04/03
2.1K0
两种方案开发小程序动画
两种方案开发小程序动画
在普通的网页开发中,动画效果可以通过css3来实现大部分需求,在小程序开发中同样可以使用css3,同时也可以通过api方式来实现。
用户2356368
2024/02/02
1980
两种方案开发小程序动画
微信小程序-卫星菜单
微信菜单款式千千万万,主要分顶部、底部、垂直横栏。今天特发奇想做个类似安卓的卫星菜单吧。之前网上都很多教程,但需要的时候就找不到,于是就写这篇文章记录一下。
谭广健
2022/06/05
8920
微信小程序动画两种实现方式
利用小程序API提供的wx.createAnimation(OBJECT)实现,API中是这样说:创建一个动画实例animation。调用实例的方法来描述动画。最后通过动画实例的export方法导出动画数据传递给组件的animation属性。
Javanx
2019/09/04
2.2K0
微信小程序动画两种实现方式
小程序图片左右摆动效果
先看效果,实现一个图片左右摇动,在一般的H5宣传页,商家活动页面我们会看到这样的动画,小程序的动画效果不同于css3动画效果,是通过js来完成的,其实步骤很简单,首先创建动画实例,再调用实例来描述动画,最后导出即可。
王小婷
2019/07/15
2.1K0
小程序图片左右摆动效果
小程序底部动画弹框
接上一篇的举一反三:微信小程序商品筛选,侧方弹出动画选择页面:https://www.jianshu.com/p/e76925d39c56;这个小程序底部动画弹框也是项目之中常见的功能之一,效果如下图所示。
王小婷
2018/12/27
2.1K0
微信小程序实战开发教程-抽屉菜单
抽屉菜单是app上常见的菜单设计方式,典型的抽屉菜单如下图所示 下面展示如何基于微信小程序实现抽屉菜单,最终效果如下图所示: 页面包含一个主页和抽屉菜单页,为了实现滑动效果,页面采用absolute
极乐君
2018/02/05
2.8K0
微信小程序实战开发教程-抽屉菜单
微信小程序自定义底部弹出框功能
本文实例为大家分享了微信小程序自定义底部弹出框的具体代码,供大家参考,具体内容如下
超级小可爱
2023/02/20
4.4K0
如何在小程序中使用罗盘
现代生活中,经常会用到导航系统,导航系统必不可少的一个功能就是罗盘,何为罗盘?简单罗盘通过磁力将内部的指针指向某个方向,从而实现判别方位。现代技术以及将罗盘缩小到移动设备端,我们可以直接在手机端查看罗盘的指向。
刺猬
2018/11/29
5.1K1
如何在小程序中使用罗盘
微信小程序实现各种特效实例
写在前面 最近在负责一个微信小程序的前端以及前后端接口的对接的项目,整体上所有页面的布局我都已经搭建完成,里面有一些常用的特效,总结一下,希望对大家和我都能有所帮助 实例1:滚动tab选项卡 先看一下
okaychen
2018/01/05
4.1K3
微信小程序实现各种特效实例
微信小程序弹出层动画
<button bindtap="showModal">Click Me</button> <view class="pop" wx:if="{{showPop}}"> <view class="popbg" bindtap="hideModal"></view> <view class="popup" animation="{{animationData}}">内容</view> </view> .popbg { position: fixed; top: 0; left: 0
明知山
2020/09/03
1.9K0
如何在小程序中使用加速度计
在小程序日常开发中,我们可能会遇到需要通过旋转手机等方式来触发某种事件,为此,就需要调用手机当中的加速度计来为我们获取手机的当前状态了。
英特奈特
2018/11/28
12.9K1
如何在小程序中使用加速度计
小程序点击按钮弹出可填写框
这是项目里面一个简单的效果,小程序点击按钮弹出可填写框,摘下代码,方便之后遇到的时候可以直接拿来使用。 效果如下:
王小婷
2018/12/28
3.5K0
微信小程序|旋转动画效果
在小程序中,如果可以用一个动画效果展现一句话或一段文字,会比普通文字呈现更具吸引力,这不仅是体现更多样的文字效果,更是突出这段文字的一个方法。那么接下来就来看一下如何实现一个文字旋转的动画效果吧。
算法与编程之美
2020/05/16
2.9K0
微信小程序向左滑动删除操作(类仿微信、QQ)
上一个小程序的项目里面做过这个功能,当时没有记录下来,今天特意做了一个小的demo放在了github上面,下次在开发中遇到的话就可以直接拿下来代码复用了。效果很简单,类似于微信扣扣删除聊天栏的效果,想左滑动,出现删除按钮,点击即可删除。
王小婷
2018/12/24
3.7K1
微信小程序实现A-Z快捷导航
效果 代码 slidebar.wxml <view id="s-bar" class="slidebar" bindtouchstart="_onTouchStart" bindtouchmove=
用户5997198
2019/11/15
1.4K0
微信小程序实现A-Z快捷导航
微信小程序加减号弹出框详解
<view class='add-rob' bindtap="setModalStatus" data-status="0" wx:if="{{showModalStatus}}">view> <view class='rob-box' wx:if="{{showModalStatus}}"> <view class="shade-shop-detail"> <view class="detail-right flexb"> <view class='detail-title-de'>购买数
疯狂的小程序
2018/01/25
1.8K0
相关推荐
小程序-渐入渐出动画效果实现
更多 >
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档
本文部分代码块支持一键运行,欢迎体验
本文部分代码块支持一键运行,欢迎体验