首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

如何使用OnTapGesture事件播放我的lottie动画?

OnTapGesture事件是一种手势识别事件,用于在用户点击屏幕时触发相应的操作。而Lottie是一个用于播放矢量动画的开源库。结合这两者,我们可以通过OnTapGesture事件来触发播放Lottie动画的操作。

要使用OnTapGesture事件播放Lottie动画,可以按照以下步骤进行:

  1. 导入Lottie库:首先,确保你的项目中已经导入了Lottie库。你可以通过在项目的依赖中添加Lottie库的引用来实现。
  2. 创建Lottie动画视图:在你的视图中创建一个Lottie动画视图,并设置相应的动画文件。你可以使用Lottie提供的方法来加载和设置动画文件。
  3. 添加OnTapGesture事件:在你的视图中添加一个OnTapGesture事件,并在事件处理程序中编写代码来播放Lottie动画。你可以使用Lottie提供的方法来控制动画的播放、暂停、停止等操作。

下面是一个示例代码,演示了如何使用OnTapGesture事件播放Lottie动画:

代码语言:txt
复制
import SwiftUI
import Lottie

struct ContentView: View {
    @State private var isAnimating = false

    var body: some View {
        VStack {
            LottieView(filename: "animation") // 替换为你的动画文件名
                .frame(width: 200, height: 200)
                .onTapGesture {
                    self.isAnimating.toggle()
                }
                .onAppear {
                    self.isAnimating = true
                }
                .onDisappear {
                    self.isAnimating = false
                }
        }
    }
}

struct LottieView: UIViewRepresentable {
    var filename: String

    func makeUIView(context: Context) -> AnimationView {
        let view = AnimationView()
        let animation = Animation.named(filename)
        view.animation = animation
        view.loopMode = .loop
        return view
    }

    func updateUIView(_ uiView: AnimationView, context: Context) {
        if uiView.isAnimationPlaying != isAnimating {
            if isAnimating {
                uiView.play()
            } else {
                uiView.stop()
            }
        }
    }
}

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
    }
}

在上面的示例代码中,我们创建了一个名为ContentView的视图,其中包含一个LottieView作为子视图。LottieView是一个遵循UIViewRepresentable协议的自定义视图,用于创建和更新Lottie动画视图。

LottieView中,我们使用makeUIView方法创建了一个AnimationView实例,并设置了相应的动画文件。在updateUIView方法中,我们根据isAnimating的值来控制动画的播放和停止。

ContentView中,我们使用onTapGesture事件来切换isAnimating的值,从而触发动画的播放和停止。同时,我们在视图出现和消失时分别设置isAnimating的初始值,以确保动画的正确播放。

这样,当用户点击LottieView时,就会触发onTapGesture事件,从而切换动画的播放状态。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

Android使用lottie加载json动画示例代码

Lottie Lottie 是 Airbnb 开源一个动画项目,它支持 iOS, mac OS Android RN,由于某些复杂动画实现,往往会写很多 code 来实现它,而且调试动画效果会比较花费时间...性能不错,而且有缓存 对比于用 GIF 动画,手写动画,轻量,性能和存储上都更佳。 不足之处 iOS 版本要 = 8.0 才可以使用。不支持 7.x 对于一些交互性动画,支持不是很好。...主要是对于播放动画 Bodymovin 插件待完善,仍然有部分 AE 效果无法成功导出 动画无法被编辑,加载下来是什么样子,就原封不动 github代码传送门 https://github.com/...https://github.com/airbnb/lottie-android 使用方式: 引入库 compile 'com.airbnb.android:lottie:1.0.1' 创建assets...=”likeanim.json” 加载json文件名 app:lottie_loop=”true” 是否循环播放 app:lottie_autoPlay=”true” 是否自动播放 常用操作:

4.1K31

【译】Activity分割动画如何使用动画##

思路很简单: Activity A保存为bitmap 把bitmap分割成两个子bitmap 子bitmap传递至Activity B 在Activity B布局之上显示两个子bitmap 使用动画向外移出两个子...对于低内存或者大屏幕设备来说,可能是很大开销。如果你依然选择使用,请小心,并且不要过度使用。...但是发现,最简单实现方式,就是将他们以成员变量形式放到一个公共区域中。所以,创建了一个静态类用来持有子bitmap,所有的创建操作和动画逻辑,也都在这里个类里面,稍后会详细介绍。...使用硬件加速(了解更多有关硬件加速动画,请阅读最新发布blog)并且在动画结束或者取消后,做了一些清理操作(如,移除硬件图层,把Imageview从Window窗口移除等等) 如何使用动画##...曾反复思考,在尽量不限制开发者情况下,如何最简单便捷使用它。

1.4K20

复杂帧动画之移动端video采坑实现

在企鹅辅导品牌页中,我们需要实现一个动画如下: 页面滚动到动画区域,播放动画, 对应动画部分如下: 帧动画当前实现有以下几种方式: GIF 动画 大家比较熟悉图片格式 lottie(http:...//airbnb.io/lottie/) Airbnb 开源项目,通过解析 AE 动画为 json 数据,支持跨平台动画效果解决方案;lottie 在辅导中已经有实际应用,使用同学都表示对其实现效果和开发速度表示称赞和推荐...实现,右图为我们目标实现效果 可以看到实现还是存在着差异,颜色、数字倾斜度、虚线透视都没有达到预期,于是放弃lottie 使用,但这并不否定 lottie 在实现其它动画优秀效果 APNG...这里使用变量来表示视频是否已经播放,如果已经播放就不再执行 touch 事件,避免频繁调用 play 有些安卓浏览器无法自动播放,touch 事件也无法触发播放 video 标签 play 方法返回一个...无奈之下, 针对安卓微信端,视频全部启用兼容模式(几张图片渐隐渐现) 论安卓浏览器各种诡异表现 :"设计小哥哥,这无能为力 设计:"找出所有对应机型和浏览器,对这些不支持浏览器使用兼容模式播放动画

2.3K10

lottie系列文章(二):lottie最佳实践

js文件及json文件加载方案考量 使用lottie-web解决方案,需要加载lottie-webjs文件以及动画相应json文件,这两个文件大小都比较大,所以我们应该根据需要,确定其加载方式...一般情况下,我们只需要svg格式动画,所以可以使用lottie_light版本(仅支持svg渲染)。...lottie使用 下面讲一些lottie常用方法。...在unmount时候,需要调用该方法 lottie-web常用事件 我们在lottie-web中可能也需要监听一些事件,比如加载完动画json文件时data_ready事件。...,前端加载该动画后,相应图层class会被设置为svgClass,可以通过dom方法获取这些元素并做相应操作; 动画json文件制作及导出规范 使用该方案制作动画时,有些动画效果lottie-web

5.1K31

从设计师和开发角度使用 lottie

如下图: image.png 官网宣传了3个特性: 灵活使用AE特性 随心所欲控制你动画 很小文件体积 个人认为 lottie 最大优势就是可以将设计师设计动图原原本本在页面上展现出来,完美还原了动画精细度...下面讲讲如何从 Sketch 开始,制作一个 lottie 动画文件。...这里简单说说其中 lottie-web 使用。.../assets/cycle_animation.json', }) 参数/api/事件 loadAnimation 参数 名称 描述 container 用于渲染容器,一般使用一个 div 即可 renderer...,参数1为数组,两个元素为开始帧和结束帧;参数2为,是否立即播放片段,还是等之前动画播放完成 destroy 无 销毁 事件 onComplete onLoopComplete onEnterFrame

3.1K21

动画菜鸡自我救赎之企鹅辅导品牌页开发总结

一般来说,品牌介绍页都是少不了各种动画。这里列出了辅导品牌页三个主要动画,后面我会讲实现 隧道动画: ? 页面滑动到隧道位置时候,会触发隧道动画自动播放。...最后,还有一个问题是,使用动图可能动图大小会比较大。 video 动画效果也可以通过视频来实现,采用视频方式,甚至还能调节动画播放进度,不像动图一样只能自动播放。...一开始让设计同学将路动画和隧道动画一起导出,后面发现lottie播放动画时候,路变成了黑色,可能是lottie对于透明度支持也不是很好。...右边tab是跟着隧道一起运动lottie可以监听进入每一帧事件,在每一帧里,可以根据隧道当前播放位置,确定右边tab位置。 教研团队代表动画 ?...这里主要是要看到小男孩动画,以及轴动画。 一开始看到这个小男孩动画时候,是用lottie来实现。但是使用lottie之后,发现效果与实际效果差别很大。

1.8K41

Lottie-页面动画100%硬核还原

大家好,是前端实验室大师兄! 最近大师兄开发大屏页面碰到一个困境:动画还原。 照着设计动画模仿,猜测动画时长,手创建贝塞尔曲线…… 调整细节耗时耗力,效果还差强人意......下面是Lottie提供官方效果图。类似下面这种一段动画播放,非常适合使用Lottie来做。 Lottie流程 我们先来看下整个流程简图。...设计师用AE把动画效果做出来,再用Bodymovin导出相应json文件给到前端,前端使用Lottie库就可以实现动画效果。功能简单且强大。...设置渲染器 Lottie动画监听 Lottie提供了用于监听动画执行情况事件: complete loopComplete enterFrame segmentStart config_ready(初始配置完成...) data_ready(所有动画数据加载完成) DOMLoaded(元素已添加到DOM节点) destroy 可使用addEventListener监听事件 // 动画播放完成触发 anm.addEventListener

1K40

HTML多行代码搞定微信8.0炸裂特效!CC++怎么能输「建议收藏」

lottie 是 Airbnb 出品、全平台(Web、Android、IOS、React Native)动画库,它特点在于能够直接播放使用 Adobe After Effects 制作动画。...创建一个 lottie 容器,使用 span 元素,因为 lottie 动画播放器需要挂载到一个具体 html 元素中。...设置表情动画宽高为 40px。 使用 lottie 加载动画,并设置循环播放为 false,自动播放为 true,来让表情发送时自动播放动画,且只播放一次。...800 毫秒之后再执行,目的是在炸弹表情播放到合适时间时,再播放全屏动画播放动画使用了 playExplosion() 函数,并传递了消息元素进去。...之后给 lottie 实例设置事件监听:”complete”,它会在动画执行完成时触发,里边销毁了 lottie 实例和全屏动画元素。 这样全屏动画效果就实现了。

2K20

复杂帧动画之移动端video采坑实现

开源项目,通过解析 AE 动画为 json 数据,支持跨平台动画效果解决方案;lottie 在辅导中已经有实际应用,使用同学都表示对其实现效果和开发速度表示称赞和推荐。...给到我们前端开发,在使用这段 json 数据中,我们引入了 lottie-web 脚本来解析这段 json 数据渲染成为SVG / canvas 动画,效果如下图, 左图为用 lottie 实现,右图为我们目标实现效果...可以看到实现还是存在着差异,颜色、数字倾斜度、虚线透视都没有达到预期,于是放弃lottie 使用,但这并不否定 lottie 在实现其它动画优秀效果 APNG 在对设计师给到分段动画帧图片压缩之后...这里使用变量来表示视频是否已经播放,如果已经播放就不再执行 touch 事件,避免频繁调用 play 有些安卓浏览器无法自动播放,touch 事件也无法触发播放 video 标签 play 方法返回一个...:"设计小哥哥,这无能为力 设计: "找出所有对应机型和浏览器,对这些不支持浏览器使用兼容模式播放动画 :"这所有的机型实在难以控制和全部覆盖到...

2.3K10

lottie系列文章(一):lottie介绍

类似下面这种一段动画播放,非常适合使用lottie来做。 ? 但是,给一个课程卡片本身添加动画(如:从右下角到移动到页面中,并逐渐放大过渡效果),并不适合使用lottie。...Lottie是有airbnb开发和维护,其目前star较多,司也有不少部门都是使用或者尝试。所以,综合认为:lottie是一种可靠性较高动画方案。...所以,使用Lottie方案好处在于: 动画由设计使用专业动画制作工具Adobe After Effects来实现,使动画实现更加方便,动画效果也更好; 前端可以方便调用动画,并对动画进行控制,减少前端动画工作量...,lottie-web也提供了一系列事件,例如: onComplete: 动画播放完成触发 onLoopComplete: 当前循环播放完成触发 onEnterFrame: 播放一帧动画时候触发 onSegmentStart...: 开始播放一个动画片段时候触发 总体而言,lottie-web目前提供了丰富方法和事件,基本可以满足对动画进行控制需求。

4.4K32

lottie谁是lottie?

其他常用动画方案有: Png 序列帧:文件大,可能会在不同屏幕分辨率下失真 SVG 动画:实现成本高,易出现动画还原度低情况 目前,项目需要经过调研,Lottie 动画是一种具有高可行性方案。...设计师可以通过 AE Bodymovin 插件将动画导出为 json 文件,然后通过 Lottie 实现动画效果,确保动画还原度。...lottie实现动画效果: jcode lottie-web lottie-web 支持多种特性,提供复杂动画控制和监听功能。...在 unmount 时候,需要调用该方法 监听事件: 名称 描述 data_ready 加载完 json 动画 complete 播放完成(循环播放下不会触发) loopComplete 当前循环下播放...GIF动图 Lottie动画 jcode react-lottie react-lottielottie-web 封装成 React 组件,使其更加易于在 React 中使用

31920

使用强大 AirBnb Lottie 让你 React APP 炫酷起来

然而,要制作好看动画,可能需要大量工作和大量代码。 将向你展示如何使用一个非常强大React库来制作令人惊叹、像素完美的动画来增强你应用程序,而不需要做很多工作。...最重要是,要找到和使用这些动画,你不需要Adobe After Effects程序。 如何使用 您所需要做就是使用一个完全免费资源,称为lottifiles。...这是一个拥有大量免费和付费Lottie动画网站。 假设我们想要在我们应用程序中使用一个动画React logo(注意,你可以使用任何可用动画)。...当我们准备好使用它时,我们可以通过选择Lottie JSON下载动画JSON文件: 不管你是如何创建React项目的,你都可以把它放在任何你喜欢文件夹里。...动画自动播放设置默认为true,这意味着动画会在加载时自动播放。如果你想有条件地运行动画,你可以通过使用一个状态变量将它设置为true或false(如果你想只在动画可见时播放动画)。

1.9K20

深度剖析Lottie动画原理

导语 本文主要挖掘、弄懂lottie动画背后原理。lottie动画如何让30FPS流畅运行?...下面从几个方面对lottie进行剖析: 1、如何实现一个简单lottie动画 用AE(Adobe After Effects)制作动画,结合bodymovin插件把动画导出json文件,网上很多导出案列...3、lottie如何让30FPS流畅运行? 上面已经把json数据分析清楚,但lottie如何去运行这些数据,而又能够让AE导出30fps动画流畅渲染。...一开始思考,用60fps去渲染能保证动画更流畅,但是问题来了。假设动画只有30帧,制作时候整个动画总时间1s。但是用60fps去渲染,用0.5s就完成整个动画播放。...下面是求知过程: 那我是不是可以同一帧属性数据播放播放2次,也变成了60帧,总时间去到1s。这个不可取,很明显浪费了多出来帧。 那我把一帧数据再分开一半,用2帧去完成一帧数据属性。

5.1K31

Lottie 超酷炫动画效果,了解下?

它是一个 IOS/Android/React Native 本地库,渲染后效果动画实时,允许应用程序使用动画一样容易,因为他们使用静态图像。 ? Lottie 咋集成? 1....还包括动画坚挺方法;也尝试了一下 pauseAnimation() 和 cancelAnimation(),均可停止动画播放Lottie 孰优劣?...劣势: 万事万物都有两面性,Lottie 劣势在于,动画效果不可动态修改样式,这一点很重要,不能直接调整动画颜色等,依赖于 json 文件;据说有个别的动画兼容性不太好(和尚并没遇到)...如何缓解劣势: Lottie 难道只是固定网站上这些样式吗?有些样式很好,但是个别颜色不太合适动画效果怎么办?...官方提供了 Lottie Editor,可调整各个图层颜色;还有官方文档 Lottie Doc 方便我们更快速高效使用 Lottie。 ?

1.7K31

Lottie内存泄漏问题定位与分析

【一、前言Lottie简介与使用】 1、Lottie简介 Lottie是Airbnb开源跨平台动画库,支持iOS、Android、React Native 和 Web 等平台。...3、Lottie方案优点 (1). 动画由设计使用专业动画制作工具Adobe After Effects来实现,使动画实现更加方便,动画效果也更好,100% 还原。 (2)....使用lottie方案,json文件大小会比gif文件小很多,性能也会更好。 (3). 简单实现、控制动画播放,开发效率大大提高。 (4). 可动态配置下发,实时替换动画效果。...问题场景 (录音助手SDK)首页和(输入法)页面切换,发现明显内存增长趋势。 ?...加载动画是异步,加载完成才会进入播放状态。如果compositionLayer == null 时候,会加入到task里,没开始播放。 ? 播放开始了running= true; ?

6.5K30

UWP 创建动画极简方式 — LottieUWP

LottieUWP 概述 Lottie 是 Airbnb 研发团队研发并开源一套创建和播放动画方案,可以非常方面的在全平台实现高质量动画,支持 Android, iOS, Web, UWP。...设计师在 AE (After Effects) 中设计动画,通过 AE 中 BodyMovin 插件导出为一个 JSON 文件,Lottie SDK 可以直接读取这个 JSON 文件,并通过简单代码控制播放动画...: 我们去掉 LottieAnimationView 自动播放,改为使用一个 Slider 来控制动画播放进度,动画进度取值范围是 [0.0, 1.0] 。...作者关于如何提高动画性能也做了提示: 对于没有 masks 或 mettes JSON 文件,性能和内存占用都会很理想,因为不存在 bitmap 创建过程; 如果有 mattes,2-3 个 bitmap...所以不建议在 RecyclerView 中使用带有 masks 或者 mattes JSON 文件,因为会伴有频繁创建和销毁过程,动画播放效果会降低。

1.5K70

大杀器Bodymovin和Lottie:把AE动画转换成HTML5AndroidiOS原生动画

Airbnb出了移动端动画Lottie,可以和一个名叫BodymovinAE插件结合起来,把在AE上做好动画导出为json文件,然后以Android/iOS原生动画形式在移动设备上渲染播放。...(上图为FDCon2017上渚薰讲到LottiePPT页面) 经过了一番试验后,大概摸清了Bodymovin使用方式。...下面就分步骤总结下Bodymovin安装和使用,以及导出动画如何在Web页面上播放。 1. 如果电脑上没有AE的话,需要安装AE CC2014或更高版本。以AE CC2017为例: ?...接下来我们新建一个网页来播放这段动画。...渚薰答道,An前身就是Flash,它生成出来H5动画是用js写使用CreateJS库),后期修改和维护会更复杂。

5.7K22

让我们一起来看看可爱猫咪吧

顺藤摸瓜就找到今天主角:lottie-web 开源动画库 ---- 进入正文… Lottie 动画库 官方文档 它也是机缘巧合下找到。...介绍: Lottie 是一个适用于 Android、iOS、Web 和 Windows 库,它解析使用Bodymovin导出为 json Adobe After Effects动画,并在移动设备和...然后播放动画就这么简单: var animation = bodymovin.loadAnimation({ container: document.getElementById('lottie')...注意:如果您动画包含转发器,并且您计划使用同一个动画多次调用 loadAnimation,请在传递对象之前进行深度克隆 path:动画对象相对路径。...入门就是这么简单,但是最难地方就是如何弄那个js和json文件,在它教程中它json文件称之为Lottie JSON 文件。 好像也只能通过AE进行导出,其他方式,暂且没有找到。

1.7K40

iOS高质量动画实现解决方案——Lottie

iOS高质量动画实现解决方案——Lottie     真心认为Lottie是一款十分优秀且实用动画开发库,不只对于iOS和android原生开发者来说其让复杂动画实现几乎没有成本,对于设计师来说...本篇博客主要以iOS平台为例,简单介绍和总结Lottie动画使用方式。 一、几个有用链接 Lottie官网:https://airbnb.design/lottie/。...LottieFiles是一个在线测试Lottie动画网站,并且其上面也提供了许多常用Lottie动画组件。...二、一个简单小Demo     先来看一个简单小例子,在LottieFiles上找了一个骑行动画JSON文件,此文件下载地址如下: https://www.lottiefiles.com/download...将下载JSON文件添加到iOS项目中,之后就像使用图片一样使用它即可,代码如下: #import @interface ViewController () @

2.8K20

面向前端 Lottie & AE 动画手把手入门教学

本文作者:IMWeb HuQingyang 原文出处:IMWeb社区 未经同意,禁止转载 因为一直比较关注 Web 领域设计趋势, 很早之前就听很说了 Lottie 这个项目, 但是一直没时间和机会去尝试...其实对于普通动效和简单动画, 使用原生代码实现已经足够, Lottie 是为了复杂动画而生, 下面来看几个 Lottie 实现几个动画例子: ?...要使用 Lottie, 需要在借助 Bodymovin 插件将动画工程文件从 AE 中导出成 JSON。Lottie 分别为每个平台实现了一套 Player, 只需载入JSON动画文件就可播放。.../index.html, 打开浏览器, 将会看到我们动画, 是不是非常酷~ 除了能够播放和暂停, Lottie 还为我们提供了更加精细动画控制方法和事件钩子, 有兴趣小伙伴参考: GitHub.... http://airbnb.io/lottie/ 本教程所有源码和AE工程文件都在 GitHub: HuQingyang (胡青杨) · GitHub 欢迎关注、交流、拍砖、搞基

2.6K50
领券