phyks/reveal-js-base-theme
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

smooth reset of auto-slide progress, fix overlapping repaint calls

Browse Source
This commit is contained in:
Hakim El Hattab 2013-10-19 09:35:51 -04:00
parent 2736945385
commit d761adf002
2 changed files with 47 additions and 25 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

68
js/reveal.js
View File

@ -2847,18 +2847,26 @@ var Reveal = (function(){
*/ */
function Playback( container, progressCheck ) { function Playback( container, progressCheck ) {
this.size = 50; // Cosmetics
this.diameter = 50;
this.thickness = 3; this.thickness = 3;
// Flags if we are currently playing
this.playing = false; this.playing = false;
// Current progress on a 0-1 range
this.progress = 0; this.progress = 0;
// Used to loop the animation smoothly
this.progressOffset = 1;
this.container = container; this.container = container;
this.progressCheck = progressCheck; this.progressCheck = progressCheck;
this.canvas = document.createElement( 'canvas' ); this.canvas = document.createElement( 'canvas' );
this.canvas.className = 'playback'; this.canvas.className = 'playback';
this.canvas.width = this.size; this.canvas.width = this.diameter;
this.canvas.height = this.size; this.canvas.height = this.diameter;
this.context = this.canvas.getContext( '2d' ); this.context = this.canvas.getContext( '2d' );
this.container.appendChild( this.canvas ); this.container.appendChild( this.canvas );
@ -2869,21 +2877,32 @@ var Reveal = (function(){
Playback.prototype.setPlaying = function( value ) { Playback.prototype.setPlaying = function( value ) {
var wasPlaying = this.playing;
this.playing = value; this.playing = value;
// Render instantly // Start repainting if we weren't already
this.render(); if( !wasPlaying && this.playing ) {
// Start repainting if we're playing
if( this.playing ) {
this.animate(); this.animate();
} }
else {
this.render();
}
}; };
Playback.prototype.animate = function() { Playback.prototype.animate = function() {
var progressBefore = this.progress;
this.progress = this.progressCheck(); this.progress = this.progressCheck();
// When we loop, offset the progress so that it eases
// smoothly rather than immediately resetting
if( progressBefore > 0.8 && this.progress < 0.2 ) {
this.progressOffset = this.progress;
}
this.render(); this.render();
if( this.playing ) { if( this.playing ) {
@ -2897,19 +2916,20 @@ var Reveal = (function(){
*/ */
Playback.prototype.render = function() { Playback.prototype.render = function() {
var progress = this.playing ? this.progress : 0; var progress = this.playing ? this.progress : 0,
radius = ( this.diameter / 2 ) - this.thickness,
x = this.diameter / 2,
y = this.diameter / 2,
iconSize = 14;
var radius = ( this.size / 2 ) - this.thickness, // Ease towards 1
x = this.size / 2, this.progressOffset += ( 1 - this.progressOffset ) * 0.1;
y = this.size / 2;
var iconSize = 14; var endAngle = ( - Math.PI / 2 ) + ( progress * ( Math.PI * 2 ) );
var startAngle = ( - Math.PI / 2 ) + ( this.progressOffset * ( Math.PI * 2 ) );
var startAngle = - Math.PI / 2;
var endAngle = startAngle + ( progress * ( Math.PI * 2 ) );
this.context.save(); this.context.save();
this.context.clearRect( 0, 0, this.size, this.size ); this.context.clearRect( 0, 0, this.diameter, this.diameter );
// Solid background color // Solid background color
this.context.beginPath(); this.context.beginPath();
@ -2924,12 +2944,14 @@ var Reveal = (function(){
this.context.strokeStyle = '#666'; this.context.strokeStyle = '#666';
this.context.stroke(); this.context.stroke();
// Draw progress on top of track if( this.playing ) {
this.context.beginPath(); // Draw progress on top of track
this.context.arc( x, y, radius, startAngle, endAngle, false ); this.context.beginPath();
this.context.lineWidth = this.thickness; this.context.arc( x, y, radius, startAngle, endAngle, false );
this.context.strokeStyle = '#fff'; this.context.lineWidth = this.thickness;
this.context.stroke(); this.context.strokeStyle = '#fff';
this.context.stroke();
}
this.context.translate( x - ( iconSize / 2 ), y - ( iconSize / 2 ) ); this.context.translate( x - ( iconSize / 2 ), y - ( iconSize / 2 ) );

4
js/reveal.min.js vendored
View File

File diff suppressed because one or more lines are too long