Merge pull request #61 from m1ga/feature/swift-rewrite

feat(ios): rewrite module in Swift, use latest Lottie 4.3.2

README.md

@@ -4,10 +4,8 @@
 
 ![gif](animation.gif)
 
-
 Titanium module to support smooth and scalable animations using [Airbnb Lottie](https://airbnb.design/lottie/).
 
-
 ## Requirements
 
 - Titanium SDK 9.0.0+
@@ -19,8 +17,7 @@ The Titanium modules use external libraries
 |Library|Platform|Version|Build Date|
 |---|---|---|---|
 | [Airbnb Lottie](https://github.com/airbnb/lottie-android) | Android | 5.2.0 | 2022/05/31 |
-| [Airbnb Lottie](https://github.com/airbnb/lottie-ios) | iOS | 2.5.3 | 2019/03/06 |
-
+| [Airbnb Lottie](https://github.com/airbnb/lottie-ios) | iOS | 3.4.3 | 2022/09/17 |
 
 ## Create a View
 
@@ -44,34 +41,29 @@ or in Alloy:
 
 ## Features/Documentation
 
-## Methods:
+## 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(int from, int to) | Startframe, Endframe | Plays an animation from frame `from` to `to` | iOS, Android |
 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<br>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) | 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 |
-addViewToKeypathLayer(TiUiView view, String layer) | View, Layer | Adds a given Ti.UI.View instance to a layer with the given name | iOS |
-convertRectToKeypathLayer() | args | - | iOS |
-convertPointToKeypathLayer() | args | - | iOS |
-convertRectFromKeypathLayer() | args | - | iOS |
-convertPointFromKeypathLayer() | args | - | iOS |
-setValueDelegateForKeyPath() | args | - | iOS |
 
+## Properties
 
-## Properties:
 Name | Parameter | Info | Platforms
 --- | --- | --- | --- |
-progress | float | Get/set the current progress (in percentage) | Android |
-loop | boolean | Get/set if the animation should loop | Android |
-speed | float | Get/set the speed of the animation | Android |
-duration | float | Get/set the duration of the animation | Android |
-isPlaying | boolean | Get the animation status | Android |
-cache() | boolean | - | iOS |
+progress | float | Get/set the current progress (in percentage) | iOS, Android |
+loop | boolean | Get/set if the animation should loop | iOS, Android |
+speed | float | Get/set the speed of the animation | iOS, Android |
+duration | float | Get/set the duration of the animation | iOS, Android |
+isPlaying | boolean | Get the animation status | iOS, Android |
+newRenderingEngineEnabled | boolean | Use the core animation background rendering engine instead of the main thread | iOS |
 
 creation (tss) only:
 
@@ -83,24 +75,15 @@ loop | boolean | loop the animation | iOS, Android |
 autoStart | boolean | automatically start the animation | iOS, Android |
 
 
-## Events:
+## 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 |
 
-## iOS Constants
-used in setValueDelegateForKeyPath.type
-
-Name |  Platforms
---- |  --- |
-CALLBACK_COLOR_VALUE |  iOS |
-CALLBACK_NUMBER_VALUE |  iOS |
-CALLBACK_POINT_VALUE |  iOS |
-CALLBACK_SIZE_VALUE |  iOS |
-CALLBACK_PATH_VALUE |  iOS |
-
 ## Example
+
 ```xml
 <AnimationView id='view_lottie' module='ti.animation' />
 ```

example/app.js

@@ -1,23 +1,25 @@
-var TiAnimation = require('ti.animation');
-var isAndroid = (Ti.Platform.osname == 'android');
-var offset = 0;
-var isDouble = false;
+const TiAnimation = require('ti.animation');
 
-var win = Ti.UI.createWindow({
+const isAndroid = (Ti.Platform.osname === 'android');
+let offset = 20;
+let isDouble = false;
+
+TiAnimation.newRenderingEngineEnabled = true; // iOS-only: Use the CoreAnimation background rendering engine instead of the main thread
+
+const win = Ti.UI.createWindow({
 		backgroundColor: '#fff',
-		title: 'Ti.Animation Demo',
-		fullscreen: true
+		title: 'Ti.Animation Demo'
 	}),
 	lbl = Ti.UI.createLabel({
 		bottom: 50,
-		color: "#000",
+		color: '#000',
 		textAlign: Ti.UI.TEXT_ALIGNMENT_CENTER,
 		font: {
 			fontSize: 12
 		}
 	}),
 	view = TiAnimation.createAnimationView({
-		file: '/sample_lottie.json',
+		file: 'sample_lottie_new_rendering_engine.json',
 		loop: false,
 		bottom: 200,
 		left: 30,
@@ -27,16 +29,14 @@ var win = Ti.UI.createWindow({
 		autoStart: false
 	}),
 	view2 = TiAnimation.createAnimationView({
-		file: '/sample_lottie.json',
-		loop: false,
+		file: 'sample_lottie.json',
+		loop: true,
 		bottom: 200,
 		right: 30,
 		height: 120,
 		width: 120,
 		borderRadius: 60,
-		autoStart: true,
-		speed: 2,
-		loop: true
+		autoStart: true
 	}),
 	slider = Ti.UI.createSlider({
 		value: 0,
@@ -47,19 +47,19 @@ var win = Ti.UI.createWindow({
 	});
 
 if (isAndroid) {
-	view.addEventListener("update", function(e) {
-		console.log("current frame: " + e.frame)
+	view.addEventListener('update', function (e) {
+		console.log('current frame: ' + e.frame);
 	});
 }
-view.addEventListener("ready", function() {
+view.addEventListener('ready', function () {
 	var dur = (isAndroid) ? view.duration : (Math.floor(view.duration * 1000));
-	lbl.text = "Lottie: Duration: " + dur + "ms\n";
+	lbl.text = 'Lottie: Duration: ' + dur + 'ms\n';
 });
-view.addEventListener("complete", function() {
-	console.log("view: complete");
+view.addEventListener('complete', function () {
+	console.log('view: complete');
 });
-view2.addEventListener("complete", function() {
-	console.log("view2: complete");
+view2.addEventListener('complete', function () {
+	console.log('view2: complete');
 });
 
 slider.addEventListener('change', seekToProgress);
@@ -72,30 +72,29 @@ win.add([
 if (isAndroid) {
 	win.open();
 } else {
-	var nav = Ti.UI.iOS.createNavigationWindow({
+	var nav = Ti.UI.createNavigationWindow({
 		window: win
 	});
 	nav.open();
 }
 
-
 function doubleSpeed(e) {
 	if (isDouble) {
-		e.source.title = "Double speed";
-		view.setSpeed(1);
+		e.source.title = 'Double speed';
+		view.speed = 1;
 	} else {
-		e.source.title = "Normal speed";
-		view.setSpeed(2);
+		e.source.title = 'Normal speed';
+		view.speed = 2;
 	}
 	isDouble = !isDouble;
 }
 
 function seekToProgress(e) {
-	view.setProgress(e.value);
+	view.progress = e.value;
 }
 
 function getFrame() {
-	console.log("Current frame view-animation: " + view.getFrame());
+	console.log('Current frame view-animation: ' + view.frame);
 }
 
 function createButtonWithAction(title, action) {
@@ -106,12 +105,12 @@ function createButtonWithAction(title, action) {
 		width: 200,
 		borderRadius: 4,
 		borderWidth: 1,
-		borderColor: "#000",
-		color: "#000",
-		backgroundColor: "#fff"
+		borderColor: '#000',
+		color: '#000',
+		backgroundColor: '#fff'
 	});
 
-	btn.addEventListener('click', action);
+	btn.addEventListener('singletap', action);
 
 	offset += 32;
 	return btn;