離子框架中的簡單動畫

Question

我可以在離子框架視圖中創建簡單的動畫。動畫將是非常簡單的動畫，比如改變顏色，褪色，增加元素的高度和寬度，就像jquery在網頁中做的動畫一樣。

Answer 1

是的。離子中沒有任何東西會阻止這一點。你真的嘗試過嗎？或者你問是否Ionic 運送這樣的東西？據我所知，答案是否定的。

Answer 2

離子動畫與您在標準html頁面上的動畫一樣，唯一的區別是如何設置它的角度。

它在分配給視圖的控制器中，您可以添加您的代碼。

.controller('homeCtrl', ['$scope', function($scope) { 
    // Jquery animation 
    $(selector).animate({params},speed,callback); 

    // Greensock animation 
    var photo = document.getElementById("photo"); //or use jQuery's $("#photo") 
    TweenLite.to(photo, 1.5, {width:100}); 

    // or define a function and call it when you want an animation to run 
    $scope.animate = function(element) { 
     $(element).animate({params},speed,callback); 
    } 
}]) 

這就是它的要點，你可以看看更詳細的東西上YearOfMoo

Answer 3

是的，你可以對這個看看。

一個功能強大的JavaScript動畫引擎，適用於web和混合移動應用程序，受Facebook Pop的啓發，由Ionic團隊構建。

https://github.com/driftyco/collide

var animation = collide.animation({ 
    // 'linear|ease|ease-in|ease-out|ease-in-out|cubic-bezer(x1,y1,x2,y2)', 
    // or function(t, duration), 
    // or a dynamics configuration (see below) 
    easing: 'ease-in-out', 
    duration: 1000, 
    percent: 0, 
    reverse: false 
}); 

// Actions, all of these return `this` and are chainable 
// .on('step' callback is given a 'percent', 0-1, as argument (for springs it could be outside 0-1 range) 
// .on('stop' callback is given a boolean, wasCompleted 
animation.on(/step|destroy|start|stop|complete/, function() {}) 
animation.once(...) //same event types 
animation.off(...) //works like jquery.off 
animation.stop(); //stop/pause at current position 
animation.start(shouldSetImmediately); //start from current position 
animation.restart(); 
animation.velocity(n) //starts the animation going at the given velocity ,relative to the distance, decaying 
animation.distance(n); //distance for the velocity to be relative to 
animation.destroy(); //unbind all events & deallocate 

animation.isRunning(); //boolean getter 

//These are getters and setters. 
//No arguments is a getter, argument is a chainable setter. 
animation.percent(newPercent, shouldSetImmediately); //0-1 
animation.duration(duration); //milliseconds 
animation.reverse(isReverse); 

animation.easing(easing); //setter, string|function(t,duration)|dynamicsConfiguration. 
// Dynamics configuration looks like this one of these: 
// animation.easing({ 
// type: 'spring', 
// frequency: 15, 
// friction: 200, 
// initialForce: false 
// }); 
// animation.easing({ 
// type: 'gravity', 
// bounce: 40, 
// gravity: 1000, 
// });