Chromium Code Reviews
chromiumcodereview-hr@appspot.gserviceaccount.com (chromiumcodereview-hr) | Please choose your nickname with Settings | Help | Chromium Project | Gerrit Changes | Sign out
(163)

Side by Side Diff: sky/framework/sky-ink-splash.sky

Issue 954023002: Implement quantum ink splashes (Closed) Base URL: git@github.com:domokit/mojo.git@master
Patch Set: nits Created 5 years, 10 months ago
Use n/p to move between diff chunks; N/P to move between comments. Draft comments are only viewable by you.
Jump to:
View unified diff | Download patch
« no previous file with comments | « sky/framework/sky-drawer.sky ('k') | no next file » | no next file with comments »
Toggle Intra-line Diffs ('i') | Expand Comments ('e') | Collapse Comments ('c') | Show Comments Hide Comments ('s')
OLDNEW
(Empty)
1 <!--
2 // Copyright 2015 The Chromium Authors. All rights reserved.
3 // Use of this source code is governed by a BSD-style license that can be
4 // found in the LICENSE file.
5 -->
6 <import src="sky-element.sky" />
7
8 <sky-element>
9 <template>
10 <style>
11 :host {
12 position: absolute;
13 pointer-events: none;
14 overflow: hidden;
15 top: 0;
16 left: 0;
17 bottom: 0;
18 right: 0;
19 }
20
21 #splash {
22 position: absolute;
23 background-color: rgba(0, 0, 0, 0.4);
24 border-radius: 0;
25 top: 0;
26 left: 0;
27 height: 0;
28 width: 0;
29 }
30 </style>
31 <div id="splash" />
32 </template>
33 <script>
34 import "animation/controller.dart";
35 import "animation/curves.dart";
36 import "animation/timer.dart";
37 import "dart:math" as math;
38 import "dart:sky";
39
40 const double _kSplashSize = 400.0;
41 const double _kSplashDuration = 500.0;
42
43 @Tagname('sky-ink-splash')
44 class SkyInkSplash extends SkyElement implements AnimationDelegate {
45 AnimationController _animation;
46 Element _splash;
47 double _offsetX;
48 double _offsetY;
49
50 SkyInkSplash() {
51 _animation = new AnimationController(this);
52 }
53
54 void shadowRootReady() {
55 _splash = shadowRoot.getElementById('splash');
56 }
57
58 void start(double x, double y, ClientRect rect) {
59 _offsetX = x - rect.left;
60 _offsetY = y - rect.top;
61 _animation.start(
62 begin: 0.0,
63 end: _kSplashSize,
64 duration: _kSplashDuration,
65 curve: easeOut);
66 }
67
68 void updateAnimation(double p) {
69 if (p == _kSplashSize) {
70 remove();
71 return;
72 }
73 _splash.style['top'] = '${_offsetY - p/2}px';
74 _splash.style['left'] = '${_offsetX - p/2}px';
75 _splash.style['width'] = '${p}px';
76 _splash.style['height'] = '${p}px';
77 _splash.style['border-radius'] = '${p}px';
78 _splash.style['opacity'] = '${1.0 - (p / _kSplashSize)}';
79 }
80 }
81
82 _init(script) => register(script, SkyInkSplash);
83 </script>
84 </sky-element>
OLDNEW
« no previous file with comments | « sky/framework/sky-drawer.sky ('k') | no next file » | no next file with comments »

Powered by Google App Engine
This is Rietveld 408576698