1. #1
    Sencha Premium Member
    Join Date
    Apr 2008
    Posts
    243
    Vote Rating
    21
    themightychris will become famous soon enough themightychris will become famous soon enough

      0  

    Question Anyone working on a proper component for embedding Sencha Animator scenes?

    Anyone working on a proper component for embedding Sencha Animator scenes?


    UPDATE: There's a rough drag-and-drop tool for converting your animations to ST2 components in post #3

    I am... and am wondering if anyone is already further along already. If not I'll share here when I get things working nicely.

    Basically I want a way to use animations created by Sencha Animator as components in ST2 that properly respond to sizing, can be controlled by the application, and can be instantiated/destroyed multiple times smoothly.

    So far I have a base component that reimplements AN.Controller and then I copy/paste the markup and scene config into each subclass.

    This seems like something someone at Sencha must be working on already...
    Chief Architect @ Jarv.us Innovations
    Co-captain @ Code for Philly
    Co-founder @ Devnuts - Philadelphia Hackerspace

  2. #2
    Sencha Premium Member
    Join Date
    Apr 2008
    Posts
    243
    Vote Rating
    21
    themightychris will become famous soon enough themightychris will become famous soon enough

      0  

    Default


    Here's what I have so far: https://gist.github.com/1868547

    I've ported AN.Controller over to a base component that can be extended for each animation. You have to paste in the scenes array and HTML as config. With scale=true a scale3d is applied to fit the animation's first scene into the component.

    I'm still having trouble though getting the animation to work again after the component has been destroyed and recreated

    It's used like this:
    Code:
    Ext.define('MyApp.animation.Explosion', {
    	extend: 'AN.AbstractAnimation'
    	,xtype: 'explosionanim'
    	
    	,config: {
    		cls: 'animation-explosion'
    		,scale: true
    		,html: [
    			'<ol id="AN-sObj-parentOl">'
    				,'<li id="AN-sObj-scene-0">...</li>'
    				,'<li id="AN-sObj-scene-1">...</li>'
    			,'</ol>'
    		].join('')
    		
    		,scenes: [{
    			id: 0
    			,animationCount: 2
    			,duration: 5189.220779220779
    			,dimensions: {
    				height: 960
    				,width: 640
    				,expanded: false
    				,fit: false
    			}
    			,endAction: function(controller) {
    				controller.replayScene();
    			}
    		},{
    			id: 2
    			,animationCount: 7
    			,duration: 3010
    			,dimensions: {
    				height: 960
    				,width: 640
    				,expanded: false
    				,fit: false
    			}
    		}]
    	}
    	
    	
    	,play: function() {
    		this.startSceneByID(2);
    	}
    });
    I can provide access to a live environment if anyone is interested in playing around
    Chief Architect @ Jarv.us Innovations
    Co-captain @ Code for Philly
    Co-founder @ Devnuts - Philadelphia Hackerspace

  3. #3
    Sencha Premium Member
    Join Date
    Apr 2008
    Posts
    243
    Vote Rating
    21
    themightychris will become famous soon enough themightychris will become famous soon enough

      0  

    Default


    I've got my animations working pretty smoothly now and setup a drag-and-drop tool for converting Sencha Animator output to a Sencha Touch 2 component:

    http://animatortouch.jarv.us/

    The produced component extends an abstract component to which I've ported all the functionality present in the AN.Controller code that comes out of animator: http://x.jarv.us/touch/AbstractAnimation.js. The output of the convert includes a line to enable autoloading this class from my server, but you may strip that in favor of a local copy if you like. Components feature an autoscaling option to scale your animation to fit the component's layout.

    The main problem right now is Animator's use of static IDs. The assigned IDs are distinct enough to not collide with anything in your Sencha Touch 2 animation, but if you're deploying multiple animations in the same app they will likely collide with each other. My workaround is to give all objects in animator custom IDs or add+delete enough objects at the start of a project to push its IDs to a unique range.

    If anyone finds this a helpful starting point for their own adventure, please keep us posted how it turns out! Big thanks to Arne Bech for helping solve some bugs.
    Chief Architect @ Jarv.us Innovations
    Co-captain @ Code for Philly
    Co-founder @ Devnuts - Philadelphia Hackerspace

  4. #4
    Sencha User
    Join Date
    Feb 2012
    Posts
    3
    Vote Rating
    0
    zzhkk is on a distinguished road

      0  

    Default


    thanks for you animator component.

    but when i used it in android 2.3.4, the animator component can't scaleToFit: the animation has move to center, but it's size didn't change? it seems scale function has no effect..

  5. #5
    Sencha Premium Member
    Join Date
    Apr 2008
    Posts
    243
    Vote Rating
    21
    themightychris will become famous soon enough themightychris will become famous soon enough

      0  

    Default


    Scaling doesn't work on older android devices right now as it uses scale3d which they don't support. I'm planing to implement a 2d scale fallback for these devices but I don't have high hopes for achieving reasonable performance on anything complex.

    For my project I am creating pre-downscaled alternate versions of animations for the older android devices.
    Chief Architect @ Jarv.us Innovations
    Co-captain @ Code for Philly
    Co-founder @ Devnuts - Philadelphia Hackerspace

  6. #6
    Sencha Premium Member
    Join Date
    Apr 2008
    Posts
    243
    Vote Rating
    21
    themightychris will become famous soon enough themightychris will become famous soon enough

      0  

    Default


    Looks like this android bug is going to make 2d scaling really complicated =[

    http://code.google.com/p/android/issues/detail?id=12451

    I think pre-scaled animations might be the only choice for earlier android systems
    Chief Architect @ Jarv.us Innovations
    Co-captain @ Code for Philly
    Co-founder @ Devnuts - Philadelphia Hackerspace

  7. #7
    Sencha User
    Join Date
    May 2012
    Posts
    6
    Vote Rating
    0
    phervas is on a distinguished road

      0  

    Default


    Hi, hope you can shed some light in my problem, im completely new here

    I need a sencha touch 2 carousel, with each slide being a Sencha Animator Slide. So when the app loads, the animation of the 1st Slide should start. If I swipe down, then the Carousel should start the 2nd animation, and so on.

    If tried using iframes for each item in the carousel to load individual Animations, but they all start at the same time and I cant swipe when on top of the iframe.

    thanks for any ideas

  8. #8
    Sencha Premium Member
    Join Date
    Apr 2008
    Posts
    243
    Vote Rating
    21
    themightychris will become famous soon enough themightychris will become famous soon enough

      0  

    Default


    Have you tried using the component creator I posted in this thread? You should be able to use it to turn each animation into a component class which you can easily insert into a carousel. Then you just have to connect each slide's show event to call its .play() method
    Chief Architect @ Jarv.us Innovations
    Co-captain @ Code for Philly
    Co-founder @ Devnuts - Philadelphia Hackerspace

  9. #9
    Sencha User
    Join Date
    May 2012
    Posts
    6
    Vote Rating
    0
    phervas is on a distinguished road

      0  

    Default


    If I understant what you mean, you suggest exporting each individual slide from Sencha Animator and convert it with the component creator, and then loading them in the carousel ?

    It might work, but all the controller code (AN.Controller javascript) that sencha animator creates would be repeated on each slide ?

    I was trying to put the js in one file, the css in another, and then the html in each Carousel item, the problem is Sencha only loads the first two items, so the animation is constructed with only the first 2 slides

  10. #10
    Sencha User
    Join Date
    May 2012
    Posts
    6
    Vote Rating
    0
    phervas is on a distinguished road

      0  

    Default


    oh i see, you do have the controller on a separate file, im gonna try it