m1ga / ti.animation Goto Github PK

View Code? Open in Web Editor NEW

106.0 12.0 20.0 50.57 MB

Airbnb Lottie + Rive animation module for Titanium SDK

License: Other

Java 7.14% JavaScript 1.62% Objective-C 88.39% Swift 2.85%

titanium android lottie keyframes airbnb-lottie facebook-keyframe ios titanium-mobile titanium-module riveapp

ti.animation's Introduction

Ti.Animation

Titanium module to support smooth and scalable animations using Airbnb Lottie and Rive (Android only).

Requirements

Android: Titanium SDK 9.0.0+
iOS: Titanium SDK 11.0.0+

Library versions:

The Titanium modules use external libraries

Library	Platform	Version
Airbnb Lottie	Android	6.3.0
Airbnb Lottie	iOS	4.1.2
Rive	Android	5.1.5

Create a View

var animation = TiAnimation.createAnimationView({
  file: '/file.json',
  loop: false,
  autoStart: false
});

or in Alloy:

<AnimationView id='view_lottie' module='ti.animation' />

Update native Libraries

iOS: Use Carthage and carthage update to compile the framework automatically. Then, copy the output from ios/Carthage/Build/iOS to ios/platform/.
Android: change the version number in build.gradle

Features/Documentation

Methods

Name	Parameter	Info	Platforms
start()		Starts an animation from the beginning	iOS, Android
start(int from, int to)	Startframe, Endframe	Plays an animation from frame `from` to `to`	Android
start({string animationName, bool loop})		Plays the rive animation	Android (Rive only)
pause()		Pause an animation	iOS, Android
resume()		Resumes an animation from the current point	iOS, Android
stop()		Stops an animation an resets it	iOS, Android
addEventListener(String event, Callback function)	Event name as string Callback function	Adds events to the animation view	iOS, Android
setFile(String path)	File path as string	Sets the current animation, Files go into app/assets/ (Alloy)	iOS, Android
setText(String layer, String text)	Layer, Text	Sets the text in the layer `layer` to `text`	Android

Properties

Name	Parameter	Info	Framework	Platforms
progress	float	Get/set the current progress (in percentage)	Lottie	Android
loop	boolean	Get/set if the animation should loop	Lottie	Android
speed	float	Get/set the speed of the animation	Lottie	Android
duration	float	Get/set the duration of the animation	Lottie	Android
isPlaying	boolean	Get the animation status	Lottie	Android
cache()	boolean	-	Lottie	iOS
animationName	String or Array	Sets the Rive animation name	Rive	Android
newRenderingEngineEnabled	boolean	Use the core animation background rendering engine instead of the main thread	Lottie	iOS

creation (tss) only:

Name	Parameter	Info	Platforms
assetFolder	String	If your animation contains images put the folder inside the assetFolder (e.g. `images/` and put the image files inside `app/assets/images/`)	Android
file	String	JSON file. Files go into app/assets/ (Alloy) Android: Support for dotLottie files in 4.1.0+	iOS, Android
jsonString	String	Pass a raw JSON string to the module	iOS
loop	boolean	loop the animation	iOS, Android
autoStart	boolean	automatically start the animation	iOS, Android
animationType	int	One of the constants `ANIMATION_LOTTIE` or `ANIMATION_RIVE`	iOS, Android

Events

Name	Info	Properties	Platforms
complete	When the animation is done	Status:int, Loop:boolean	iOS, Android
update	Fires during the animation	Frame:int, status:int (ANIMATION_START, ANIMATION_END, ANIMATION_CANCEL, ANIMATION_REPEAT, ANIMATION_RUNNING)	Android

Constants

Name	Platforms
ANIMATION_RIVE	Android
ANIMATION_LOTTIE	Android

used in setValueDelegateForKeyPath.type (iOS):

Name	Platforms
CALLBACK_COLOR_VALUE	iOS
CALLBACK_NUMBER_VALUE	iOS
CALLBACK_POINT_VALUE	iOS
CALLBACK_SIZE_VALUE	iOS
CALLBACK_PATH_VALUE	iOS

Example

<AnimationView id='view_lottie' module='ti.animation' />

'#view_lottie': {
  file: 'data.json',
  assetFolder: 'images/', // Android-only
  width: Ti.UI.SIZE,
  height: Ti.UI.SIZE,
  borderColor: '#000',
  borderWidth: 1
}

Please see the basic example in example/app.js. More examples can found in the wiki

Issue

If you scale your view bigger and you have some jagged lines you need to add disableHardwareAcceleration:true to your tss file. Performance will be slower in most cases but quality is better

Resources

At LottieFiles you will find a list of free Lottie animations.
Elephant animation by LottieFiles - weejkqwjlkejlk2

Authors

Hans Knöchel (@hansemannnn / Web)
Michael Gangolf (@MichaelGangolf / Web)

ti.animation's People

Contributors

Stargazers

Watchers

ti.animation's Issues

animation not woking for Listview

We are using lottie animation for our project. we need to add one animation inside listview template/listitem. But ti.animation doesn't have any provision to add animation in a listview.

Lottie animation crashed when switching multiple screen of lottie animation

[ERROR] : TiApplication: (main) [10840,10840] Sending event: exception on thread: main msg:java.lang.NullPointerException: Attempt to invoke virtual method 'void org.appcelerator.titanium.proxy.TiViewProxy.handlePendingAnimation(boolean)' on a null object reference; Titanium 7.1.0,2018/03/14 13:40,undefined
[ERROR] : TiApplication: java.lang.NullPointerException: Attempt to invoke virtual method 'void org.appcelerator.titanium.proxy.TiViewProxy.handlePendingAnimation(boolean)' on a null object reference
[ERROR] : TiApplication: at org.appcelerator.titanium.view.TiUIView$1$1.callAsync(TiUIView.java:549)
[ERROR] : TiApplication: at org.appcelerator.titanium.util.TiAnimationBuilder$AnimatorListener.onAnimationEnd(TiAnimationBuilder.java:1321)
[ERROR] : TiApplication: at com.nineoldandroids.animation.AnimatorSet$AnimatorSetListener.onAnimationEnd(AnimatorSet.java:756)
[ERROR] : TiApplication: at com.nineoldandroids.animation.ValueAnimator.endAnimation(ValueAnimator.java:1034)
[ERROR] : TiApplication: at com.nineoldandroids.animation.ValueAnimator.access$11(ValueAnimator.java:1024)
[ERROR] : TiApplication: at com.nineoldandroids.animation.ValueAnimator$AnimationHandler.handleMessage(ValueAnimator.java:669)
[ERROR] : TiApplication: at android.os.Handler.dispatchMessage(Handler.java:102)
[ERROR] : TiApplication: at android.os.Looper.loop(Looper.java:148)
[ERROR] : TiApplication: at android.app.ActivityThread.main(ActivityThread.java:5417)
[ERROR] : TiApplication: at java.lang.reflect.Method.invoke(Native Method)
[ERROR] : TiApplication: at com.android.internal.os.ZygoteInit$MethodAndArgsCaller.run(ZygoteInit.java:726)
[ERROR] : TiApplication: at com.android.internal.os.ZygoteInit.main(ZygoteInit.java:616)
[INFO] : Process: Sending signal. PID: 7806 SIG: 9

scenario:

I have created multiliple 4-5 screen with lottie animation. when I swiched to one screen from another screen. then I remove first screen and create new screen. if I continueously switching between 4-5 screen then app get crash with above error.

Please resolve this problem.

Listview

How can I use in list view?

TiShadow is passing a full path via file-key to loadAnimationFromJSON:(NSString *)

When using TiShadow, it is passing an absolute path, so the result from pathForResource will lead to an invalid path.

Implement a fallback mechanism to also try the passed the passed value of key file.

Add playAnimation(start, end)

Latest (Android) Lottie has playAnimation(final int startFrame, final int endFrame) which makes it easier to play animation states!
Will implement that in the next release

Remove Keyframe?

👍 or 👎 to remove Facebook Keyframe?
It looks like Lottie is more active and offers more features. Would make it easier to focus on one animation framework

iOS: addViewToLayer not working

trying to add a subview to the following animation [https://www.lottiefiles.com/558-rewards-icon] doesn't work.

$.lottie.addViewToLayer({
        view : Ti.UI.createView({
            height : 40,
            width : 40,
            backgroundColor : "red",
            zIndex : 4
        }),
        layer : "Star"
    });

Update Example app

Example app still uses createLottieView instead of createAnimationView.
It won't run with createLottieView.

Enable CI

Use Travis like done with Ti.Bluetooth

Add feature to run Lottie animations inside ListView after some user actions like in `itemClick` event.

I checked out the docs related to ListView & found that we can run Lottie animations only by setting autoStart to true.

However, there may be various use-cases where we need to run animation after some user actions like if there's a LIKE-DISLIKE Lottie animation view shown inside the ListView, then it should animate when user clicks on it.

Is it possible at present, if not, how we can add this feature?

Would be glad to support if needed!

ready to use module for 7

Hi Michael,
I need the module, cannot compile: 'package com.airbnb.lottie does not exist'
Sorry found on gittio, why not here?

Rename proxies

createLottie -> createLottieAnimation ()
createKeyframes -> CreateKeyframeAnimation ()

App crashes on iOS 11 simulator at launch

A simple app only showing a lottie animation crashes on simulator (iOS 11) at start as soon as the ti.animation module for iOS (latest beta version) is included.
No logs are retrieved by Appcelerator Sudio as the app crashes instantaneously.

iOS module does not work

in ios lottie animation does not load. I am using iOS 10.1 and ti sdk 6.1.2

Android: Add image support

Adding setImageAssetsFolder to support images:
https://github.com/airbnb/lottie-android#image-support

Already WIP (https://github.com/m1ga/ti.animation/blob/master/android/src/ti/animation/LottieViewProxy.java#L313), but it doesn't find the images at the moment

iOS 1.2.0 beta 1 - Error on device

Hi,

I just downloaded the Beta 1 for iOS, it works great on the simulator but on a device the App crashes without showing any errors.
Do you have any idea why ? I'm only using Lottie animations in my app.

Module : v 1.2.0 Beta 1
Titanium SDK : 6.2.0
Xcode v 8.3.3
Device : iPhone 6S running iOS 10.3.3
Simulator : iPhone 7 running iOS 10.3.1

Thanks !

Could this be compiled with sdk < 6.0 ?

Unfortunatly my app is still on 5.4 sdk because other modules haven't migrated yet.

Really would love to use this. Any chance this could work on pre 6.0 or is that an absolute requirement ?

Thanks!!

cannot package iOS module

Hello, I have Packaged android module and implemented the same in Android project and its works fine. But now when I am trying to package the iOS module I am facing the following error :

Launching build and packaging failed
Build failed. Unable to locate generated zip file at /Users/Mario/Documents/Appcelerator_Studio_Workspace/ti.animation-master/ti.animation-iphone-1.3.0.zip

My Titanium SDK : 7.2.0.GA

Application disables all clicks after animation ends

Hello folks,

I am experiencing a very strange issue. Every time I play the animation, as soon as it stops, all click events gets disabled on my app. All the other events are ok, I can scroll ScrollViews and ListViews but no click event works. In order to make it work again, I have to restart the app all over.

Do you know what could be going on?

The app is just a ListView, with the animation names, that opens a new window containing the animation "createLottieView".

I am using:
Titanium Studio 4.9.0.201705302345
Appcelerator SDK 6.0.3, 6.0.4 and 6.1.1
Nexus 6P - Android 7.1.2
Nexus 5 - Android 5.1.0

Thank you!

click event not firing

either attaching it with alloy markup or using addEventListener the click event never fires

multithread handling

Whats about? Like:

TiMessenger.sendBlockingMainMessage(getMainHandler().obtainMessage(MSG_STARTANIMATION), viewObject);

Implementing ti.animation crashes iOS on older versions

I have been trying the example project, and here's my outcome

Android:

Works great

iOS:

iPhone Xs (15.4.1) Works great
iPhone 6s (12.5.5) Crashes the app

So, the app is crashing on the older phone with the older version. There are no logs on the crash.

complete event is called twice in android

Just tried example code and got that complete event is being called twice....

Typo in example

in example: createLottie(), but the right name of method is createLottieView

[ANDROID] added LottieView in ListItem but only the last one is displayed

Please check the below testing code and attached file.

Screenshot

Reproduce code

var TiAnimation = require('ti.animation');
var win = Ti.UI.createWindow({backgroundColor: 'white'});

var myTemplate = {
    properties: {
        width:  Ti.UI.FILL,
        height: 200
    },
    childTemplates: [
        {
            type:   'TiAnimation.LottieView',
            bindId: 'ani',
            properties: {
                file: 'sample_lottie.json',
                contentMode: 0,
                width: 150, height: 150,
                loop: false, autoStart: false,
                backgroundColor: 'blue'
            }
        },
        {
            type: 'Ti.UI.Label',
            bindId: 'info',
            properties: {
                color: 'black',
                font: { fontFamily:'Arial', fontSize: '20dp', fontWeight:'bold' },
                left: '60dp', top: 0,
            }
        },
    ]
};

var listView = Ti.UI.createListView({
    templates: { 'template': myTemplate },
    efaultItemTemplate: 'template'
});
var sections = [];

var fruitSection = Ti.UI.createListSection();
var fruitDataSet = [
    { info: { text: 'Hello' }, ani: { top: 10, left: 10 }},
    { info: { text: 'World' }, ani: { top: 30, left: 30 }},
    { info: { text: 'Titanium' }, ani: { top: 50, left: 50 }}
];
fruitSection.setItems(fruitDataSet);
sections.push(fruitSection);

function onItemclick(e) {
    var item = e.section.getItemAt(e.itemIndex);
    item.ani.start = true;
    item.ani.onFinished = function() {
        item.ani.start = false
        e.section.updateItemAt(e.itemIndex, item);
    }
    e.section.updateItemAt(e.itemIndex, item);
}

listView.addEventListener('itemclick', onItemclick);

listView.setSections(sections);
win.add(listView);
win.open();

iOS: Feature-Request: Add "assetFolder" for Android-parity

I have put the images folder and the json file on /app/assets/iphone/
The json file is working but the images are not displayed, I add put the assetFolder properties to : images/

lottie animation get crashed with android target sdk 28 and android pie device

Below are error logs

[ERROR] : TiExceptionHandler: (main) [6,34604] Invalid Layer Save Flag - only ALL_SAVE_FLAGS is allowed

[ERROR] : TiExceptionHandler:

[ERROR] : TiExceptionHandler: android.graphics.Canvas.checkValidSaveFlags(Canvas.java:378)

[ERROR] : TiExceptionHandler: android.graphics.Canvas.saveLayer(Canvas.java:455)

[ERROR] : TiExceptionHandler: com.airbnb.lottie.model.layer.BaseLayer.applyMasks(BaseLayer.java:326)

[ERROR] : TiExceptionHandler: com.airbnb.lottie.model.layer.BaseLayer.draw(BaseLayer.java:215)

[ERROR] : TiExceptionHandler: com.airbnb.lottie.model.layer.CompositionLayer.drawLayer(CompositionLayer.java:90)

[ERROR] : TiExceptionHandler: com.airbnb.lottie.model.layer.BaseLayer.draw(BaseLayer.java:187)

[ERROR] : TiExceptionHandler: com.airbnb.lottie.LottieDrawable.draw(LottieDrawable.java:341)

[ERROR] : TiExceptionHandler: android.widget.ImageView.onDraw(ImageView.java:1368)

[ERROR] : TiExceptionHandler: android.view.View.draw(View.java:20366)

[ERROR] : TiExceptionHandler: android.view.View.buildDrawingCacheImpl(View.java:19637)

[ERROR] : TiExceptionHandler: android.view.View.buildDrawingCache(View.java:19497)

[ERROR] : TiExceptionHandler: android.view.View.draw(View.java:20086)