Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP
Browse files

use css3 transforms instead of manually animating, seems a bit faster

  • Loading branch information...
commit 6a34e5e3c117ac131e722554d054449b9aa13886 1 parent 7496d52
@langalex authored
View
1  _attachments/index.html
@@ -37,7 +37,6 @@
<script src="./vendor/jquery/jquery.svganim.js"></script>
<script src="./javascripts/helpers.js"></script>
<script src="./javascripts/store.js"></script>
- <script src="./javascripts/interpolator.js"></script>
<script src="./javascripts/controls.js"></script>
<script src="./javascripts/screen.js"></script>
<script src="./javascripts/app.js"></script>
View
1  _attachments/javascripts/app.js
@@ -70,7 +70,6 @@ $(function() {
if(audience_display === null) {
audience_display = window.open(location.href, 'audience_display', 'location=no,menubar=no,status=no,toolbar=no,titlebar=no');
screen.scale_factor(0.5);
- screen.animation_steps(4);
$('#presenter_overlay')
.css('margin-top', '-' + $('#screen').height() + 'px')
.show();
View
3  _attachments/javascripts/controls.js
@@ -28,9 +28,6 @@ var bind_controls = function(screen) {
});
$('#screen').mousemove(function(event) {
- if(screen.is_animating()) {
- return;
- }
if(previous_mouse_x != null) {
var delta_x = event.clientX - previous_mouse_x;
var delta_y = event.clientY - previous_mouse_y;
View
24 _attachments/javascripts/interpolator.js
@@ -1,24 +0,0 @@
-var Interpolator = function(old_value, target_value, steps) {
- var distance = old_value - target_value,
- new_value = old_value;
-
- if(distance < 0) { // make the number a bit bigger for cases where the number is so small it would be rounded down to zero when being divided by 50 below
- distance -= 0.01;
- } else {
- distance += 0.01;
- };
-
- return {
- next: function() {
- if(!this.is_done()) {
- new_value = new_value - distance / steps;
- };
- return new_value;
- },
- is_done: function() {
- return distance == 0 ||
- (distance > 0 && target_value >= new_value) ||
- (distance < 0 && target_value <= new_value);
- }
- };
-};
View
43 _attachments/javascripts/screen.js
@@ -1,6 +1,5 @@
var Screen = function(canvas) {
var animating = false,
- animationSteps = 10,
scale_factor = 1,
current_transformation = {
@@ -18,37 +17,22 @@ var Screen = function(canvas) {
function update_canvas(animate) {
if(animate) {
- var x_interpolator = Interpolator(last_transformation.translate_x, current_transformation.translate_x, animationSteps),
- y_interpolator = Interpolator(last_transformation.translate_y, current_transformation.translate_y, animationSteps);
- rotation_interpolator = Interpolator(last_transformation.rotate, current_transformation.rotate, animationSteps);
- scale_interpolator = Interpolator(last_transformation.scale, current_transformation.scale, animationSteps);
-
- animating = true;
- var animator = window.setInterval(function() {
- var done = x_interpolator.is_done() && y_interpolator.is_done() && rotation_interpolator.is_done() && scale_interpolator.is_done();
-
- transform_canvas(x_interpolator.next(), y_interpolator.next(), rotation_interpolator.next(), scale_interpolator.next());
-
- if(done) {
- window.clearInterval(animator);
- animating = false;
- };
- }, 500 / animationSteps);
-
+ canvas.css('-webkit-transition', 'all 0.5s linear').css('-moz-transition', 'all 0.5s linear').css('-o-transition', 'all 0.5s linear')
} else {
- transform_canvas(
- current_transformation.translate_x,
- current_transformation.translate_y,
- current_transformation.rotate,
- current_transformation.scale
- );
+ canvas.css('-webkit-transition', '').css('-moz-transition', '').css('-o-transition', '')
};
+ transform_canvas(
+ current_transformation.translate_x,
+ current_transformation.translate_y,
+ current_transformation.rotate,
+ current_transformation.scale
+ );
};
function transform_canvas(x, y, rotation, scale) {
var transformations = [
- 'translate(' + [parseInt(x, 10) + 'px',
- parseInt(y, 10)] + 'px)',
+ 'translate3d(' + [parseInt(x, 10) + 'px',
+ parseInt(y, 10)] + 'px, 0px)',
'rotate(' + rotation + 'deg' + ')',
'scale(' + scale * scale_factor + ')'
];
@@ -68,10 +52,6 @@ var Screen = function(canvas) {
update_canvas(true);
},
- animation_steps: function(steps) {
- animationSteps = steps;
- },
-
translate: function(delta_x, delta_y) {
current_transformation.translate_x += (delta_x / current_transformation.scale);
current_transformation.translate_y += (delta_y / current_transformation.scale);
@@ -95,9 +75,6 @@ var Screen = function(canvas) {
current_transformation = target_transformation;
update_canvas(true);
},
- is_animating: function() {
- return animating;
- },
load_presentation: function(path) {
if(path.match(/\.svg/)) {
canvas.svg({loadURL: path});
Please sign in to comment.
Something went wrong with that request. Please try again.