var Ext=Ext||{};Ext._startTime=new Date().getTime();(function(){var g=this,a=Object.prototype,h=a.toString,b=true,f={toString:1},e=function(){},d=function(){var i=d.caller.caller;return i.$owner.prototype[i.$name].apply(this,arguments)},c;Ext.global=g;for(c in f){b=null}if(b){b=["hasOwnProperty", "valueOf","isPrototypeOf","propertyIsEnumerable","toLocaleString","toString","constructor"]} Ext.enumerables=b;Ext.apply=function(o,n,q){if(q){Ext.apply(o,q)}if(o&&n&&typeof n==="object"){var p,m,l;for(p in n){o[p]=n[p]}if(b){for(m=b.length;m--;){l=b[m];if(n.hasOwnProperty(l)){o[l]=n[l]}}}}return o};Ext.buildSettings=Ext.apply({baseCSSPrefix:"x-",scopeResetCSS:false},Ext.buildSettings||{});Ext.apply(Ext,{name:Ext.sandboxName||"Ext",emptyFn:e,emptyString:new String(),baseCSSPrefix:Ext.buildSettings.baseCSSPrefix,applyIf:function(j,i){var k;if(j){for(k in i){if(j[k]===undefined){j[k]=i[k]}}}return j},iterate:function(i,k,j){if(Ext.isEmpty(i)){return}if(j===undefined){j=i}if(Ext.isIterable(i)){Ext.Array.each.call(Ext.Array,i,k,j)}else{Ext.Object.each.call(Ext.Object,i,k,j)}}});Ext.apply(Ext,{extend:(function(){var i=a.constructor,j=function(l){for(var k in l){if(!l.hasOwnProperty(k)){continue}this[k]=l[k]}};return function(k,p,n){if(Ext.isObject(p)){n=p;p=k;k=n.constructor!==i?n.constructor:function(){p.apply(this,arguments)}}var m=function(){},l,o=p.prototype;m.prototype=o;l=k.prototype=new m();l.constructor=k;k.superclass=o;if(o.constructor===i){o.constructor=p}k.override=function(q){Ext.override(k,q)};l.override=j;l.proto=l;k.override(n);k.extend=function(q){return Ext.extend(k,q)};return k}}()),override:function(l,m){if(l.$isClass){l.override(m)}else{if(typeof l=="function"){Ext.apply(l.prototype,m)}else{var i=l.self,j,k;if(i&&i.$isClass){for(j in m){if(m.hasOwnProperty(j)){k=m[j];if(typeof k=="function"){k.$name=j;k.$owner=i;k.$previous=l.hasOwnProperty(j)?l[j]:d}l[j]=k}}}else{Ext.apply(l,m)}}}return l}});Ext.apply(Ext,{valueFrom:function(k,i,j){return Ext.isEmpty(k,j)?i:k},typeOf:function(j){var i,k;if(j===null){return"null"}i=typeof j;if(i==="undefined"||i==="string"||i==="number"||i==="boolean"){return i}k=h.call(j);switch(k){case"[object Array]":return"array";case"[object Date]":return"date";case"[object Boolean]":return"boolean";case"[object Number]":return"number";case"[object RegExp]":return"regexp"}if(i==="function"){return"function"}if(i==="object"){if(j.nodeType!==undefined){if(j.nodeType===3){return(/\S/).test(j.nodeValue)?"textnode":"whitespace"}else{return"element"}}return"object"}},isEmpty:function(i,j){return(i===null)||(i===undefined)||(!j?i==="":false)||(Ext.isArray(i)&&i.length===0)},isArray:("isArray" in Array)?Array.isArray:function(i){return h.call(i)==="[object Array]"},isDate:function(i){return h.call(i)==="[object Date]"},isObject:(h.call(null)==="[object Object]")?function(i){return i!==null&&i!==undefined&&h.call(i)==="[object Object]"&&i.ownerDocument===undefined}:function(i){return h.call(i)==="[object Object]"},isSimpleObject:function(i){return i instanceof Object&&i.constructor===Object},isPrimitive:function(j){var i=typeof j;return i==="string"||i==="number"||i==="boolean"},isFunction:(typeof document!=="undefined"&&typeof document.getElementsByTagName("body")==="function")?function(i){return h.call(i)==="[object Function]"}:function(i){return typeof i==="function"},isNumber:function(i){return typeof i==="number"&&isFinite(i)},isNumeric:function(i){return !isNaN(parseFloat(i))&&isFinite(i)},isString:function(i){return typeof i==="string"},isBoolean:function(i){return typeof i==="boolean"},isElement:function(i){return i?i.nodeType===1:false},isTextNode:function(i){return i?i.nodeName==="#text":false},isDefined:function(i){return typeof i!=="undefined"},isIterable:function(j){var i=typeof j,k=false;if(j&&i!="string"){if(i=="function"){if(Ext.isSafari){k=j instanceof NodeList||j instanceof HTMLCollection}}else{k=true}}return
Touch has some nice CSS3 animations like slide, flip, fade, pop and cube…but what if you need something different, like a custom slide-fade animation?
I’ve covered how to use animations in Using CSS3 animations on Sencha Touch and Animate components in a view, but I didn’t cover the internals of the framework, nor how can you create a custom animation. So let’s take a look at it, step by step.
Continue reading
Since the last post (Using CSS3 animations on Sencha Touch) was about animations, and I stumbled upon this question at Sencha’s forum, I thought I would develop a simple demo showing how to take a view, and animate random components inside it.
Obviously there are simple page animations, such as with a card layout, but I’m looking for the right approach to animate an object like a button – for example to get it to fly in from the side after a delay, after the view is loaded.
Here’s hoping someone will take pity on me, and spell it out!
Allister
So you’ve seen all those cool animations on Touch demos right? Cards with slide effect, Message boxes that pop or fade out, etc… Here are some quick examples and tips on how you can change default animations and add more style to your app.
There’s basically 3 ways you can embed animations in your views:
