javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2026-03-13 10:22:08 +08:00
Code Issues Packages Projects Releases Wiki Activity

More timing functions

Browse Source
This commit is contained in:
Max Lynch
2014-05-01 11:31:54 -05:00
committed by Andy Joslin
parent 0b47d80f90
commit 9c43dda4e5
3 changed files with 56 additions and 23 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
js/animation/animation.js
View File

@@ -101,7 +101,7 @@
tf = tf(this.duration);
return this._run(function(percent, now, virtual) {
//console.log('Animation step', percent, now, virtual);
console.log(percent);
self.el[0].style[ionic.CSS.TRANSFORM] = 'translate3d(' + (percent * 400) + 'px, 0,0)';
}, function() {
return true;

33
js/animation/timing-functions.js
View File

@@ -5,20 +5,35 @@
ionic.Animation.TimingFn = {
'linear': function(duration) {
return function(t) {
return t;
}
},
'ease': function(duration) {
var bz = ionic.Animation.Bezier.getCubicBezier(0.25, 0.1, 0.25, 1.0, duration);
return function(t) {
return bz(t);
}
},
'ease-in': function(duration) {
//0.42, 0.0, 1.0, 1.0
var bz = ionic.Animation.Bezier.getCubicBezier(0.42, 0.0, 1.0, 1.0, duration);
return function(t) {
return bz(t);
}
},
'ease-out': function(duration) {
var bz = ionic.Animation.Bezier.getCubicBezier(0.0, 0.0, 0.58, 1.0, duration);
return function(t) {
return bz(t);
}
},
'ease-in-out': function(duration) {
var bz = ionic.Animation.Bezier.getCubicBezier(0.42, 0.0, 0.58, 1.0, duration);
return function(t) {
//console.log(t);
return bz(t);
}
/*
0.42, 0.0, 0.58, 1.0)
t /= d/2;
if (t < 1) return c/2*t*t*t + b;
t -= 2;
return c/2*(t*t*t + 2) + b;
*/
}
};
})(window);

44
test/html/animation.html
View File

@@ -1,5 +1,5 @@
<!DOCTYPE html>
<html ng-app="ionic">
<html ng-app="myApp">
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title></title>
@@ -14,6 +14,11 @@
height: 100px;
background-color: black;
}
#opts {
position: absolute;
top: 200px;
left: 10px;
}
</style>
</head>
@@ -22,23 +27,36 @@
<div ng-controller="MyCtrl">
<div class="box"></div>
<div id="opts">
<button ng-click="do('{{v}}')" ng-repeat="v in fns">{{v}}</button>
</div>
</div>
<script>
function MyCtrl($scope, $ionicAnimation) {
angular.module('myApp', ['ionic'])
.controller('MyCtrl', function($scope, $ionicAnimation) {
$scope.fns = [
'linear',
'ease',
'ease-in',
'ease-out',
'ease-in-out'
];
var el = angular.element(document.querySelector('.box'));
var fadeIn = $ionicAnimation({
el: el,
name: 'fadeIn',
duration: 500,
delay: 0,
autoReverse: false,
repeat: -1,
curve: 'ease-in-out'
});
$scope.do = function(fn) {
var fadeIn = $ionicAnimation({
el: el,
name: 'fadeIn',
duration: 500,
delay: 0,
autoReverse: false,
repeat: -1,
curve: fn
});
fadeIn.start();
}
fadeIn.start();
}
});
</script>
</body>
</html>