Lottie踩坑记

最近项目里面Lottie用的比较多,但是在使用的时候发现一些问题,今天先讲一个。

Toggle动画

类似这样的组件,我们应该用的很多,比如一些开关Switch,一些状态切换,比如Toggle button,这些组件我们要设置动画,就可以借助Lottie来做一些比较酷炫的动画效果。

问题

一般这样的动画,json文件是这样的,从Off状态,到On状态做一个切换效果,toggle的时候,我们需要从Off到On,或者从On到Off,这就需要对这个动画json做正向Play和逆向Play。这个时候问题就来了,Android Lottie SDK并不支持完美的逆向Play,相关的文档也几乎没有,如果拆成两个json文件,一个正向,一个逆向,可以是可以,但是在切换过程中,会有一些闪,效果不是很好,而iOS SDK那边,竟然提供了一个LOTAnimatedSwitch的组件,直接就可以完成这样的Toggle操作,而Android这边,竟然只有一个LottieAnimationView可以使用,两边的API居然都不同步。。。

解决

解决方案找了很久,最后在LottieAnimationView的注释中,找到了相应的解决方案,直接上代码了,简单来说,就是setSpeed和setProgress两个方法的组合使用,我们来看看注释。

  /**
   * Sets the playback speed. If speed < 0, the animation will play backwards.
   */
  public void setSpeed(float speed)

直接上代码了,已经封装好了。

/**
 * Created by XuYisheng .
 * <p>
 * Lottie实现Toggle效果(Lottie文件需要满足:初始是On状态,结束是Off状态)
 */
public class LottieToggleAnimateView {

    private LottieAnimationView mAnimationView;

    /**
     * 基本使用方法
     * LottieToggleAnimateView lottieToggleAnimateView = new LottieToggleAnimateView(lottieAnimationView, true);
     * 切换状态时调用toggle()
     *
     * @param animationView LottieAnimationView
     * @param isOn          初始状态是否是On
     */
    public LottieToggleAnimateView(LottieAnimationView animationView, boolean isOn) {
        mAnimationView = animationView;
        mAnimationView.useHardwareAcceleration(true);
        float progress;
        if (isOn) {
            progress = 1F;
        } else {
            progress = 0F;
            mAnimationView.setSpeed(-mAnimationView.getSpeed());
        }
        mAnimationView.setProgress(progress);
    }

    /**
     * 切换状态
     */
    public void toggle() {
        mAnimationView.setSpeed(-mAnimationView.getSpeed());
        if (!mAnimationView.isAnimating()) {
            mAnimationView.playAnimation();
        }
    }
}

注释应该写的很清楚了,用LottieToggleAnimateView包装一下LottieAnimationView就可以了。

原文发布于微信公众号 - Android群英传(android_heroes)

原文发表时间:2018-08-03

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏逆向技术

win32程序之子窗口编程

  在前边我们已经讲解了窗口的本质.以及如何注册窗口类跟创建窗口. 还讲了消息循环.

2122
来自专栏程序员互动联盟

【Windows编程】系列第七篇:Menubar的创建和使用

上一篇我们学习了利用windows API创建工具栏和状态栏,与上一篇紧密联系的就是菜单栏,菜单栏是一个大多数复杂一些的Windows应用程序不可或缺的部分。比...

2818
来自专栏子勰随笔

开发中一些常用的工具链接(MD5、Timestamp等)

21710
来自专栏文大师的新世界

7. 偷用Swiper简改

看这段代码应该就很清楚了,如果是android系统就渲染Pager如果是ios就使用横向的ScrollView,修改后的app首页如下:

1013
来自专栏ionic3+

svg平移缩放

svg平移缩放,我刚开始尝试的是自己处理外层容器的控制,结果发现能用,但是效果不太好,有拖尾现象,后来用个js库svg-pan-zoom即可。如果想支持手机端手...

1252
来自专栏施炯的IoT开发专栏

Windows Phone Developer Tools RTW 新特性-Pivot控件

    IE9 Beta发布了,Windows Phone Developer Tools RTW也来了,开发者和发烧友又有得忙活了。园子里好多朋友已经开始了研...

1926
来自专栏Golang语言社区

使用Go开发一个简单的服务器程序

最近有个小项目,需要一个简单的后台程序来支撑,本来想用Nodejs来做,但是由于本人js一直很菜,并且很讨厌callback,虽然我也很喜欢异步模型,但我一直都...

2928
来自专栏Pythonista

博客园css样式代码

文章有一个好的排版,将能够增加阅读者对其内容的兴趣。本文总结了如何美化博客园中文章的部分显示样式。美化文章标题的显示样式、增添LaTex数学公式的显示、目录索引...

3642
来自专栏向治洪

React Native 使用react-native-image-picker库实现图片上传功能

react-native-image-picker作为一个集成相机和相册的功能的第三方库,因为其使用相对简单受到前端开发人员的喜爱。 react-native-...

5879
来自专栏糊一笑

移动端效果之ScrollList

写在前面 列表一直是展示数据的一个重要方式,在手机端的列表展示又和PC端展示不同,毕竟手机端主要靠滑。之前手机端之前一直使用的IScroll,但是IScroll...

2756

扫码关注云+社区

领取腾讯云代金券