OLD | NEW |
| (Empty) |
1 <!-- | |
2 Copyright 2013 Google Inc. All Rights Reserved. | |
3 | |
4 Licensed under the Apache License, Version 2.0 (the "License"); | |
5 you may not use this file except in compliance with the License. | |
6 You may obtain a copy of the License at | |
7 | |
8 http://www.apache.org/licenses/LICENSE-2.0 | |
9 | |
10 Unless required by applicable law or agreed to in writing, software | |
11 distributed under the License is distributed on an "AS IS" BASIS, | |
12 WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. | |
13 See the License for the specific language governing permissions and | |
14 limitations under the License. | |
15 | |
16 --> | |
17 | |
18 <!DOCTYPE html> | |
19 | |
20 <link rel="author" title="Sandy Phan, Sarah Heimlich" | |
21 href="mailto:sandyphan@google.com, sarahheimlich@google.com"> | |
22 <title>Parallel Animation</title> | |
23 <meta name="flags" content="dom"> | |
24 <meta name="tutorial" content="Web Animations tutorials"> | |
25 <link rel="stylesheet" type="text/css" href="../tutorial-style.css"> | |
26 <script type="text/javascript" src="../jquery.js"></script> | |
27 <script type="text/javascript" src="../page-load.js"></script> | |
28 | |
29 <ul class="topMenu"> | |
30 <li><a href="../home-page.html">Home</a></li> | |
31 <li><a href="#">Tutorials</a> | |
32 <ul class="subMenu"> | |
33 <li><a href="../basic-animations/basic-animation.html"> | |
34 Basic Animations</a></li> | |
35 <li><a href="parallel.html">Parallel Animations</a></li> | |
36 <li><a href="../sequence/sequence.html">Sequence Animations | |
37 </a></li> | |
38 <li><a href="../timing-dictionary/timing-dictionary.html"> | |
39 Timing Dictionary</a></li> | |
40 <li><a href="../timing-functions/timing-function.html"> | |
41 Timing Functions</a></li> | |
42 </ul> | |
43 </li> | |
44 <li><a href="../references/references.html">References</a></li> | |
45 <li><a href="../about.html">About</a></li> | |
46 </ul> | |
47 <div id="main"> | |
48 | |
49 <div id="title">Web Animations Tutorial</div> | |
50 | |
51 <div class="line-separator"></div> | |
52 | |
53 <div class="content"> | |
54 <p class="description">Web animations is to have a flash or GIF animation | |
55 intergrated onto the web page. Normal web animations still require | |
56 the use of plugins such as Java Applets, Shockwave, Adobe Flash. In this | |
57 tutorial, we will be showing you how to create animations using | |
58 javascript without the need of installing plugins.</p> | |
59 | |
60 <br /> | |
61 | |
62 <div class="heading subTitle">Parallel Animation Group</div> | |
63 | |
64 <p class="description">There certainly are times when you want to | |
65 group items together such that they have the same features and effects. | |
66 There are 2 types of groupings: parallel and sequential. In this | |
67 section you will learn about parallel groups and what kind of | |
68 feature does it have to help you write less code.</p> | |
69 | |
70 <p class="description">Just as what the name of the group means, all | |
71 the children being grouped in a parallel group will run in parallel, | |
72 that is they will start together and of course they will end at | |
73 different time depends on their durations.</p> | |
74 | |
75 <p class="description">The following is the interface for creating | |
76 a parallel animation group.</p> | |
77 | |
78 <code class="codeSamples">new AnimationGroup([children], | |
79 {timing/timing dictionary});</code> | |
80 | |
81 <p class="description note">Note that both children and timing are | |
82 nullable (i.e. you can leave children as [] if you don't want to | |
83 specify a child). Though only timing is optional</p> | |
84 | |
85 <div class="separator"></div> | |
86 | |
87 </div> <!-- content ending div --> | |
88 <div class="line-separator"></div> | |
89 </div> <!-- main ending div --> | |
90 | |
91 <ul class="sideMenu"> | |
92 <li id="menuLabel">Parallel Animation Group</li> | |
93 <li>Basic Info</li> | |
94 <li>Exercise 1</li> | |
95 <li>Exercise 2</li> | |
96 <li>Exercise 3</li> | |
97 </ul> | |
98 | |
99 <div class="separator"></div> | |
100 | |
101 <script type="text/javascript" src="../try-it-yourself.js"></script> | |
OLD | NEW |