| Index: pkg/polymer/lib/elements/web-animations-js/tutorial/basic-animations/basic-animation.html
|
| diff --git a/pkg/polymer/lib/elements/web-animations-js/tutorial/basic-animations/basic-animation.html b/pkg/polymer/lib/elements/web-animations-js/tutorial/basic-animations/basic-animation.html
|
| new file mode 100644
|
| index 0000000000000000000000000000000000000000..1a6506716abfd87cf9b8b2805693bbfbfae7a458
|
| --- /dev/null
|
| +++ b/pkg/polymer/lib/elements/web-animations-js/tutorial/basic-animations/basic-animation.html
|
| @@ -0,0 +1,120 @@
|
| +<!--
|
| +Copyright 2013 Google Inc. All Rights Reserved.
|
| +
|
| +Licensed under the Apache License, Version 2.0 (the "License");
|
| +you may not use this file except in compliance with the License.
|
| +You may obtain a copy of the License at
|
| +
|
| + http://www.apache.org/licenses/LICENSE-2.0
|
| +
|
| +Unless required by applicable law or agreed to in writing, software
|
| +distributed under the License is distributed on an "AS IS" BASIS,
|
| +WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
| +See the License for the specific language governing permissions and
|
| +limitations under the License.
|
| +
|
| +-->
|
| +
|
| +<!DOCTYPE html>
|
| +
|
| +<link rel="author" title="Sandy Phan, Sarah Heimlich",
|
| + href="mailto:sandyphan@google.com, sarahheimlich@google.com">
|
| +<title>Create Basic Animation</title>
|
| +<meta name="flags" content="dom">
|
| +<meta name="tutorial" content="Web Animations tutorials">
|
| +<link rel="stylesheet" type="text/css" href="../tutorial-style.css">
|
| +<script type="text/javascript" src="../jquery.js"></script>
|
| +<script type="text/javascript" src="../page-load.js"></script>
|
| +
|
| +
|
| +
|
| +<ul class="topMenu">
|
| + <li><a href="../home-page.html">Home</a></li>
|
| + <li><a href="#">Tutorials</a>
|
| + <ul class="subMenu">
|
| + <li><a href="basic-animation.html">Basic Animations</a></li>
|
| + <li><a href="../parallel/parallel.html">Parallel Animations</a></li>
|
| + <li>
|
| + <a href="../sequence/sequence.html">Sequence Animations</a>
|
| + </li>
|
| + <li>
|
| + <a href="../timing-dictionary/timing-dictionary.html">Timing Dictionary</a>
|
| + </li>
|
| + <li>
|
| + <a href="../timing-functions/timing-function.html">Timing Functions</a>
|
| + </li>
|
| + </ul>
|
| + </li>
|
| + <li><a href="../references/references.html">References</a></li>
|
| + <li><a href="../about.html">About</a></li>
|
| +</ul>
|
| +
|
| +<div id="main">
|
| +
|
| + <div id="title">Web Animations Tutorial</div>
|
| +
|
| + <div class="line-separator"></div>
|
| +
|
| + <div class="content">
|
| +
|
| + <p class="description">Web animations is to have a flash or GIF
|
| + animation intergrated onto the web page. Normal web animations
|
| + still require the use of plugins such as Java Applets, Shockwave,
|
| + Adobe Flash. In this tutorial, we will be showing you how to
|
| + create animations using javascript without the need of
|
| + installing plugins.</p>
|
| +
|
| + <br />
|
| +
|
| + <div class="heading subTitle">Create a new basic animation</div>
|
| +
|
| + <p class="description">To create animations on objects such
|
| + as moving left, right, up, down, change colours, etc, use
|
| + the following interface:</p>
|
| +
|
| + <code class="codeSamples">new Animation(element,
|
| + {effect(s)}, {optional: timed items});</code>
|
| +
|
| + <ul>
|
| + <li><p class="description">'new Animation' creates an animation object,
|
| + 'element' is the DOM object or animation target that we want to
|
| + animate and it is a compulsory component and can be nullable.
|
| + For instance, 'element' can be a 'div' with, a 'p' (paragraph).</p>
|
| + </li>
|
| +
|
| + <li><p class="description">'effects' defines the types of effects
|
| + in animation such as move left, or right, or change colours, or
|
| + change opacity, etc. 'effects' is also a compulsory component as
|
| + well as nullable. This parameter can be of AnimationEffect object
|
| + or CustomAnimationEffect object. These effects will be shared with
|
| + any other animation objects referring to the same AnimationEffect
|
| + or CustomAnimationEffect object. In the case this component being
|
| + null, the animation will have a null effect.</p>
|
| + </li>
|
| +
|
| + <li><p class="description">'timed items' can be of type double or
|
| + timing dictionary and is nullable and optional component. When
|
| + this parameter is double, then it specifies the duartion of a
|
| + single iteration of the animation. If it is null, then the default
|
| + value for iteration duration would be zero is specified in the
|
| + Timing Dictionary.</p>
|
| + </li>
|
| +
|
| + </ul>
|
| +
|
| + </div> <!-- content ending div -->
|
| +
|
| +<div class="line-separator"></div>
|
| +</div> <!-- main ending div -->
|
| +
|
| +<ul class="sideMenu">
|
| + <li id="menuLabel">Create Basic Animation</li>
|
| + <li>Basic Info</li>
|
| + <li>Exercise 1</li>
|
| + <li>Exercise 2</li>
|
| + <li>Exercise 3</li>
|
| + <li>Exercise 4</li>
|
| + <li>Exercise 5</li>
|
| +</ul>
|
| +
|
| +<script type="text/javascript" src="../try-it-yourself.js"></script>
|
|
|
Chromium Code Reviews
Issue 175443005:
[polymer] import all elements (Closed)
Base URL: https://dart.googlecode.com/svn/branches/bleeding_edge/dart