| 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>Create Basic 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 | |
| 30 | |
| 31 <ul class="topMenu"> | |
| 32 <li><a href="../home-page.html">Home</a></li> | |
| 33 <li><a href="#">Tutorials</a> | |
| 34 <ul class="subMenu"> | |
| 35 <li><a href="basic-animation.html">Basic Animations</a></li> | |
| 36 <li><a href="../parallel/parallel.html">Parallel Animations</a></li> | |
| 37 <li> | |
| 38 <a href="../sequence/sequence.html">Sequence Animations</a> | |
| 39 </li> | |
| 40 <li> | |
| 41 <a href="../timing-dictionary/timing-dictionary.html">Timing Dictionary<
/a> | |
| 42 </li> | |
| 43 <li> | |
| 44 <a href="../timing-functions/timing-function.html">Timing Functions</a> | |
| 45 </li> | |
| 46 </ul> | |
| 47 </li> | |
| 48 <li><a href="../references/references.html">References</a></li> | |
| 49 <li><a href="../about.html">About</a></li> | |
| 50 </ul> | |
| 51 | |
| 52 <div id="main"> | |
| 53 | |
| 54 <div id="title">Web Animations Tutorial</div> | |
| 55 | |
| 56 <div class="line-separator"></div> | |
| 57 | |
| 58 <div class="content"> | |
| 59 | |
| 60 <p class="description">Web animations is to have a flash or GIF | |
| 61 animation intergrated onto the web page. Normal web animations | |
| 62 still require the use of plugins such as Java Applets, Shockwave, | |
| 63 Adobe Flash. In this tutorial, we will be showing you how to | |
| 64 create animations using javascript without the need of | |
| 65 installing plugins.</p> | |
| 66 | |
| 67 <br /> | |
| 68 | |
| 69 <div class="heading subTitle">Create a new basic animation</div> | |
| 70 | |
| 71 <p class="description">To create animations on objects such | |
| 72 as moving left, right, up, down, change colours, etc, use | |
| 73 the following interface:</p> | |
| 74 | |
| 75 <code class="codeSamples">new Animation(element, | |
| 76 {effect(s)}, {optional: timed items});</code> | |
| 77 | |
| 78 <ul> | |
| 79 <li><p class="description">'new Animation' creates an animation object, | |
| 80 'element' is the DOM object or animation target that we want to | |
| 81 animate and it is a compulsory component and can be nullable. | |
| 82 For instance, 'element' can be a 'div' with, a 'p' (paragraph).</p> | |
| 83 </li> | |
| 84 | |
| 85 <li><p class="description">'effects' defines the types of effects | |
| 86 in animation such as move left, or right, or change colours, or | |
| 87 change opacity, etc. 'effects' is also a compulsory component as | |
| 88 well as nullable. This parameter can be of AnimationEffect object | |
| 89 or CustomAnimationEffect object. These effects will be shared with | |
| 90 any other animation objects referring to the same AnimationEffect | |
| 91 or CustomAnimationEffect object. In the case this component being | |
| 92 null, the animation will have a null effect.</p> | |
| 93 </li> | |
| 94 | |
| 95 <li><p class="description">'timed items' can be of type double or | |
| 96 timing dictionary and is nullable and optional component. When | |
| 97 this parameter is double, then it specifies the duartion of a | |
| 98 single iteration of the animation. If it is null, then the default | |
| 99 value for iteration duration would be zero is specified in the | |
| 100 Timing Dictionary.</p> | |
| 101 </li> | |
| 102 | |
| 103 </ul> | |
| 104 | |
| 105 </div> <!-- content ending div --> | |
| 106 | |
| 107 <div class="line-separator"></div> | |
| 108 </div> <!-- main ending div --> | |
| 109 | |
| 110 <ul class="sideMenu"> | |
| 111 <li id="menuLabel">Create Basic Animation</li> | |
| 112 <li>Basic Info</li> | |
| 113 <li>Exercise 1</li> | |
| 114 <li>Exercise 2</li> | |
| 115 <li>Exercise 3</li> | |
| 116 <li>Exercise 4</li> | |
| 117 <li>Exercise 5</li> | |
| 118 </ul> | |
| 119 | |
| 120 <script type="text/javascript" src="../try-it-yourself.js"></script> | |
| OLD | NEW |
|---|
Chromium Code Reviews
Issue 786953007:
npm_modules: Fork bower_components into Polymer 0.4.0 and 0.5.0 versions (Closed)
Base URL: https://chromium.googlesource.com/infra/third_party/npm_modules.git@master