MozillaWiki

User:Mantaroh/Scroll-driven animations: Difference between revisions

User page Discussion

User:Mantaroh/Scroll-driven animations (view source)

Revision as of 03:20, 30 June 2016

618 bytes removed ,  30 June 2016
Fix typo.
(Update CSS Features.)
(Fix typo.)
 
(2 intermediate revisions by the same user not shown)
Line 1: Line 1:
'''** Note : This Document is WIP(Doesn't translate yet.) **'''
== Scroll-driven animations. ==
== Scroll-driven animations. ==
For previous discussion, see [[Platform/Layout/Extended Timelines|Extended Timeline]].
For previous discussion, see [[Platform/Layout/Extended Timelines|Extended Timeline]].
Line 39: Line 37:


   // example: we have three animations.
   // example: we have three animations.
   target1.style.animation = "animation1 50s linear Infinity";
   target1.style.animation = "animation1 50s linear Infinite";
   target2.style.animation = "animation2 100s linear Infinity";
   target2.style.animation = "animation2 100s linear Infinite";
   target3.style.animation = "animation3 70s linear 10s";<br/>
   target3.style.animation = "animation3 70s linear 10s";<br/>
   var anim1 = target1.getAnimations()[0];
   var anim1 = target1.getAnimations()[0];
Line 53: Line 51:
   // example: we have two animation which having infinite iterations.
   // example: we have two animation which having infinite iterations.
   var scrollTimeline = new ScrollTimeline(scrollElem, "vertical");
   var scrollTimeline = new ScrollTimeline(scrollElem, "vertical");
   var keyframe1 = new KeyframeEffect(target, {transform:['none','translate(100px)']}, {duration:1000, iterations:Infinity});
   var keyframe1 = new KeyframeEffect(target, {transform:['none','translate(100px)']}, {duration:1000, iterations:Infinite});
   var keyframe2 = new KeyframeEffect(target, {transform:['none','translate(100px)']}, {duration:3000, iterations:Infinity});<br/>
   var keyframe2 = new KeyframeEffect(target, {transform:['none','translate(100px)']}, {duration:3000, iterations:Infinite});<br/>
   var anim1 = new Animation(keyframe1, scrollTimeline);
   var anim1 = new Animation(keyframe1, scrollTimeline);
   var anim2 = new Animation(keyframe2, scrollTimeline);<br/>
   var anim2 = new Animation(keyframe2, scrollTimeline);<br/>
Line 61: Line 59:
   // example: we have two infinite animations and specified scroll range.
   // example: we have two infinite animations and specified scroll range.
   var scrollTimeline = new ScrollTimeline(scrollElem, "vertical", 2000);
   var scrollTimeline = new ScrollTimeline(scrollElem, "vertical", 2000);
   var keyframe1 = new KeyframeEffect(target, {transform:['none','translate(100px)']}, {duration:1000, iterations:Infinity};
   var keyframe1 = new KeyframeEffect(target, {transform:['none','translate(100px)']}, {duration:1000, iterations:Infinite};
   var keyframe2 = new KeyframeEffect(target, {transform:['none','translate(100px)']}, {duration:3000, iterations:Infinity};<br/>
   var keyframe2 = new KeyframeEffect(target, {transform:['none','translate(100px)']}, {duration:3000, iterations:Infinite};<br/>
   var anim1 = new Animation(keyframe1, scrollTimeline);
   var anim1 = new Animation(keyframe1, scrollTimeline);
   var anim2 = new Animation(keyframe2, scrollTimeline);<br/>
   var anim2 = new Animation(keyframe2, scrollTimeline);<br/>
Line 86: Line 84:
== Implement overview ==
== Implement overview ==
  We need to implement several features as follow.
  We need to implement several features as follow.
   - Notify the scroll value to ScrollTimeline from scroll containers.
   - Notify the scroll value to related ScrollTimeline from scroll containers.
  - (ScrollTimeline requests to scroll container for receivable scroll notification?)
   - ScrollTimeline should implement AnimationTimeline interface and RefreshObserver interface.
   - ScrollTimeline should implement AnimationTimeline interface and RefreshObserver interface.
   - ScrollTimeline need to remain the scroll value which notified from scroll container.
   - ScrollTimeline needs to remain the scroll value which notified from scroll container in order to calculate several times when tick.
   - ScrollTimeline need to override AnimationTimeline::GetCurrentTime in order to notify current progress of aninmation to own animations.
   - ScrollTimeline needs to override AnimationTimeline::GetCurrentTime in order to notify current progress of animation to own animations.
 
 
[Memo]
- e10s の時どうする?
  -> window から通知されるスクロール量をコンテンツ側の ScrollTimeline へ通知する必要がある
 
== Problem of implementation. ==
1) The concept of time value<br/>
We managed [https://w3c.github.io/web-animations/#time-value| time value] in Timeline, However ScrollTimeline doesn't have the concept of time. Because start position of ScrollTimeline is corresponding the start of animation. So ScrollTimeline doesn't have timve value but have relative position of animation.
In order to implement these, ScrollTimeline should have the start time of animation.
 
2) Supporting multi ScrollTimeline<br/>
The animation have same timeline object each other.


3) End delay<br/>
[Consideration]
ScrollTimeline has limited range. i.e. timeline is finite range.
- How notify the scroll value from parent to child process? Especially e10s environment.
Mantaroh
28

edits

Retrieved from "https://wiki.mozilla.org/Special:MobileDiff/1138214...1138224"