m1ga/ti.animation

Airbnb Lottie + Rive animation module for Titanium SDK

ti.animation's Issues

iOS module does not work

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

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 !

Android: Update to Lottie 3.0

Lottie 3.0 for Android is available but currently we can't upgrade since it is using AndroidX libraries since 2.8:
https://github.com/airbnb/lottie-android/blob/master/CHANGELOG.md

Those support libraries are not supported by Appcelerator yet: https://jira.appcelerator.org/browse/TIMOB-26472

Listview

How can I use in list view?

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

Receipt for usage in list view

Following this JIRA ticket https://jira.appcelerator.org/browse/TIMOB-24776

const TiAnimation = require('ti.animation');
exports.pool_progress ={
	properties : {
		height : 32,
	},
	childTemplates : [ {
		type: 'AnimationView',
		module: 'TiAnimation',
		properties: {
			file :'/images/cup.json',
			width : 32,
			height : 32
		}
	}

[ERROR] :  TiExceptionHandler: (main) [185,389] ti:/listview.js:102
[ERROR] :  TiExceptionHandler: 			throw new Error('Could not lookup constructor for namespace: "' + namespace + '"');
[ERROR] :  TiExceptionHandler:    ^
[ERROR] :  TiExceptionHandler: Error: Could not lookup constructor for namespace: "AnimationView"

@m1ga do you know the trick?

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.

multithread handling

Whats about? Like:

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

complete event is called twice in android

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

Allow to pass JSON instead of path

Add the option to pass a JSON as parameter

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/

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"
    });

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.

iOS Position and scale

Hi! This is a great module, first of all thanks for it.

I am having some issues with the position and the scale of the Lottie animations, just in iOS.
I just wanted to know if the iOS version is a work in progress, or if you don't have these issues.

It seems that it ignores the width, height and contentMode.

Thanks again.

click event not firing

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

Enable CI

Use Travis like done with Ti.Bluetooth

Like/Dislike animation

Hi guys and thanks for this amazing module.

Is there any way in iOS to start a reversed animation, from the end to the beginning? Start() -> I like it, reverse () -> I do not like it, for example.

Thanks!!!

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)

[ERROR] : TiExceptionHandler: android.view.ViewGroup.drawChild(ViewGroup.java:4337)

[ERROR] : TiExceptionHandler: android.view.ViewGroup.dispatchDraw(ViewGroup.java:4116)

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

[ERROR] : TiExceptionHandler: android.view.View.updateDisplayListIfDirty(View.java:19241)

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

[ERROR] : TiExceptionHandler: android.view.ViewGroup.drawChild(ViewGroup.java:4337)

[ERROR] : TiExceptionHandler: android.view.ViewGroup.dispatchDraw(ViewGroup.java:4116)

[ERROR] : TiExceptionHandler: android.view.View.updateDisplayListIfDirty(View.java:19232)

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

[ERROR] : TiExceptionHandler: android.view.ViewGroup.drawChild(ViewGroup.java:4337)

[ERROR] : TiExceptionHandler: android.view.ViewGroup.dispatchDraw(ViewGroup.java:4116)

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

[ERROR] : TiExceptionHandler: android.view.View.updateDisplayListIfDirty(View.java:19241)

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

[ERROR] : TiExceptionHandler: android.view.ViewGroup.drawChild(ViewGroup.java:4337)

[ERROR] : TiExceptionHandler: android.view.ViewGroup.dispatchDraw(ViewGroup.java:4116)

[ERROR] : TiExceptionHandler: android.view.View.updateDisplayListIfDirty(View.java:19232)

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

[ERROR] : TiExceptionHandler: android.view.ViewGroup.drawChild(ViewGroup.java:4337)

[ERROR] : TiExceptionHandler: android.view.ViewGroup.dispatchDraw(ViewGroup.java:4116)

[ERROR] : TiExceptionHandler: android.view.View.updateDisplayListIfDirty(View.java:19232)

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

[ERROR] : TiExceptionHandler: android.view.ViewGroup.drawChild(ViewGroup.java:4337)

[ERROR] : TiExceptionHandler: android.view.ViewGroup.dispatchDraw(ViewGroup.java:4116)

[ERROR] : TiExceptionHandler: android.view.View.updateDisplayListIfDirty(View.java:19232)

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

[ERROR] : TiExceptionHandler: android.view.ViewGroup.drawChild(ViewGroup.java:4337)

[ERROR] : TiExceptionHandler: android.view.ViewGroup.dispatchDraw(ViewGroup.java:4116)

[ERROR] : TiExceptionHandler: android.view.View.updateDisplayListIfDirty(View.java:19232)

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

[ERROR] : TiExceptionHandler: android.view.ViewGroup.drawChild(ViewGroup.java:4337)

[ERROR] : TiExceptionHandler: android.view.ViewGroup.dispatchDraw(ViewGroup.java:4116)

[ERROR] : TiExceptionHandler: android.view.View.updateDisplayListIfDirty(View.java:19232)

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

[ERROR] : TiExceptionHandler: android.view.ViewGroup.drawChild(ViewGroup.java:4337)

[ERROR] : TiExceptionHandler: android.view.ViewGroup.dispatchDraw(ViewGroup.java:4116)

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

[ERROR] : TiExceptionHandler: com.android.internal.policy.DecorView.draw(DecorView.java:781)

[ERROR] : TiExceptionHandler: android.view.View.updateDisplayListIfDirty(View.java:19241)

[ERROR] : TiExceptionHandler: android.view.ThreadedRenderer.updateViewTreeDisplayList(ThreadedRenderer.java:690)

[ERROR] : TiExceptionHandler: android.view.ThreadedRenderer.updateRootDisplayList(ThreadedRenderer.java:696)

[ERROR] : TiExceptionHandler: android.view.ThreadedRenderer.draw(ThreadedRenderer.java:805)

[ERROR] : TiExceptionHandler: android.view.ViewRootImpl.draw(ViewRootImpl.java:3515)

[ERROR] : TiExceptionHandler: android.view.ViewRootImpl.performDraw(ViewRootImpl.java:3312)

[ERROR] : TiExceptionHandler: android.view.ViewRootImpl.performTraversals(ViewRootImpl.java:2681)

[ERROR] : TiExceptionHandler: android.view.ViewRootImpl.doTraversal(ViewRootImpl.java:1633)

[ERROR] : TiExceptionHandler: android.view.ViewRootImpl$TraversalRunnable.run(ViewRootImpl.java:7786)

[ERROR] : TiExceptionHandler: android.view.Choreographer$CallbackRecord.run(Choreographer.java:1004)

[ERROR] : TiExceptionHandler: android.view.Choreographer.doCallbacks(Choreographer.java:816)

[ERROR] : TiExceptionHandler: android.view.Choreographer.doFrame(Choreographer.java:751)

[ERROR] : TiExceptionHandler: android.view.Choreographer$FrameDisplayEventReceiver.run(Choreographer.java:990)

[ERROR] : TiExceptionHandler: android.os.Handler.handleCallback(Handler.java:873)

[ERROR] : TiExceptionHandler: android.os.Handler.dispatchMessage(Handler.java:99)

[ERROR] : TiExceptionHandler: android.os.Looper.loop(Looper.java:193)

Android: Add duration/speed

Java code:

animationView.addAnimatorUpdateListener((animation) -> {
    // Do something.
});
animationView.playAnimation();
...
if (animationView.isAnimating()) {
    // Do something.
}
...
animationView.setProgress(0.5f);
...
// Custom animation speed or duration.
ValueAnimator animator = ValueAnimator.ofFloat(0f, 1f)
    .setDuration(500);
animator.addUpdateListener(animation -> {
    animationView.setProgress(animation.getAnimatedValue());
});
animator.start();
...
animationView.cancelAnimation();

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.

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!

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!

[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();

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

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.

lottie animation not supporting text animation with custom fonts

In Android, for Appcelerator, when we use lottie animation json file containing specific font. it will throw below error.
java.lang.RuntimeException: Font asset not found fonts/Calibri.ttf

I have added Calibri font in My asset folder.

Update Example app

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

Rename proxies

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

Dynamic Placeholder

Can we add the dynamic place holder for images.

E.g.

1. consider there are multiple images in the animation and we are animating them on swipe events.
2. But the requirements can and will change time to time and I we have to improvise as per that.

Typo in example

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

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

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!!

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: Not found animation file on ItemTemplate

@hansemannn it's for you ;)

It works as expected on Android but not on iOS

[ERROR] TiAnimationLottieView: The specified file (null) could not be loaded.

alloy.js

var TiAnimation = require('ti.animation');

template.xml

<Alloy>
  <ItemTemplate name="animation_template">
    <View width="Ti.UI.FILL" height="Ti.UI.SIZE" layout="vertical">
      <LottieView ns="TiAnimation" bindId="animation" class="animation"/>
      <Label bindId="message" class="message"/>
    </View>
  </ItemTemplate>
</Alloy>

template.tss

".animation" : {
  width: 200,
  height: 200,
  loop: true,
  autoStart: true
}

list.js

$.listSection.setItems([{
  properties: {},
  message: {
    text: 'I am a   @@message'
  },
  animation: {
    file: 'path/to/file.json'
  },
  template: 'animation_template'
}]);

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?

AnimatorUpdateListener

I think we need a snippet like this:

AnimatorUpdateListener updateListener = new AnimatorUpdateListener() {
	@Override
		public void onAnimationUpdate(ValueAnimator animator) {
			onFinish.call(getKrollObject(), new KrollDict());
		}
	};
lottieView.addAnimatorUpdateListener(updateListener);

inside private class.