Summary: [Polymer] x-gif assembly, dynamic adjustment of the playback speed drawing gif!
This component introduces an adjustable drawing speed gif: X-gif , have tested the truth: can be used to adjust gif speed of slot, ping-pong effect, an exploded view (using EZoApp, press preview can preview)
A few days ago Google io Assembly has just published, read some slightly in the General Assembly introduced to the polymer, we found that many developers put into use to develop polymer components, which have a component called xgif, is dynamically controlled gif speed. For visual designers, before we have to control the speed of gif, often want to open photoshop, then the animated version of the open face, you can manually adjust the time interval to a shadow gif grid, if you want gif reversed, the whole election frame then reverse frame ... and so on, back and forth repeatedly test, in order to show the page or App has the best experience. (For example: news flashes a gif, have different experiences flicker and 0.1 seconds 0.2 seconds flashing)
After using xgif this component, as a visual designer in the world suddenly become clear, only the value set speed, you can control the playback speed gif, an increase of parameters, you can make gif staggered forward and reverse playback, and even gif will be parsed by frame, the following will introduce how to use this component:
first, of course you want to load platform.js, but I'm here because this used EZoApp development tools, polymer complete support, so we do not have this part after the trouble, the next is seen directly xgif use this component polymer developed (can also be pulled out from the left Palette) to pull out, you can see the program
- src : the file path animation (like sometimes have cross-domain server problem)
- Speed : As the name suggests adjusting the speed, may have been added up from 0, 1 is the default speed gif itself, the larger the number the more quickly
- the Fill : Do you want to fill the screen (more than would seem to be cut off)
- Pong-the ping : let the animation automatically rewind after the broadcast finished
- exploded : exploded view of a picture of the animated show up
This is my own testing program:
If you want to use the stop / start function, but also remember to fill in the place of javascript
document.querySelectorAll('x-gif').array().forEach(function (el) {
el.addEventListener('click', function () {
el.stopped = (el.stopped == null) ? true : null;
})
})
});
Then you can click to make the animation movie is paused, the label or in the pre- stopped so that a picture is beginning to pause, then tap to start playing, in fact, there are many interesting features, such as allowing animations to follow the music player (I found small animations are too short, do not apply the way), you can take a look at the official presentation xgif http://geelen.github.io/x-gif/#/http://i.imgur.com/iKXH4E2.gif
Finally, take a look at the effect xgif: the use of slot gif speed adjustment, ping-pong effect, an exploded view (using EZoApp, press preview can preview)
Original: Large column [Polymer] x-gif assembly, dynamic adjustment of the playback speed drawing gif!