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

Side by Side Diff: sky/examples/fn/widgets/inksplash.dart

Issue 993033003: Move example fn widgets into sky/framework/components (Closed) Base URL: git@github.com:domokit/mojo.git@master
Patch Set: Created 5 years, 9 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/examples/fn/widgets/icon.dart ('k') | sky/examples/fn/widgets/material.dart » ('j') | no next file with comments »
Toggle Intra-line Diffs ('i') | Expand Comments ('e') | Collapse Comments ('c') | Show Comments Hide Comments ('s')
OLDNEW
(Empty)
1 part of widgets;
2
3 const double _kSplashSize = 400.0;
4 const double _kSplashDuration = 500.0;
5
6 class SplashAnimation {
7 AnimationGenerator _animation;
8 double _offsetX;
9 double _offsetY;
10
11 Stream<String> _styleChanged;
12
13 Stream<String> get onStyleChanged => _styleChanged;
14
15 void cancel() => _animation.cancel();
16
17 SplashAnimation(sky.ClientRect rect, double x, double y,
18 { Function onDone })
19 : _offsetX = x - rect.left,
20 _offsetY = y - rect.top {
21
22 _animation = new AnimationGenerator(_kSplashDuration,
23 end: _kSplashSize, curve: easeOut, onDone: onDone);
24
25 _styleChanged = _animation.onTick.map((p) => '''
26 top: ${_offsetY - p/2}px;
27 left: ${_offsetX - p/2}px;
28 width: ${p}px;
29 height: ${p}px;
30 border-radius: ${p}px;
31 opacity: ${1.0 - (p / _kSplashSize)};
32 ''');
33 }
34 }
35
36 class InkSplash extends Component {
37
38 Stream<String> onStyleChanged;
39
40 static Style _style = new Style('''
41 position: absolute;
42 pointer-events: none;
43 overflow: hidden;
44 top: 0;
45 left: 0;
46 bottom: 0;
47 right: 0;
48 ''');
49
50 static Style _splashStyle = new Style('''
51 position: absolute;
52 background-color: rgba(0, 0, 0, 0.4);
53 border-radius: 0;
54 top: 0;
55 left: 0;
56 height: 0;
57 width: 0;
58 ''');
59
60 double _offsetX;
61 double _offsetY;
62 String _inlineStyle;
63
64 InkSplash(Stream<String> onStyleChanged)
65 : onStyleChanged = onStyleChanged,
66 super(stateful: true, key: onStyleChanged.hashCode);
67
68 bool _listening = false;
69
70 void _ensureListening() {
71 if (_listening)
72 return;
73
74 _listening = true;
75
76 onStyleChanged.listen((style) {
77 setState(() {
78 _inlineStyle = style;
79 });
80 });
81 }
82
83 Node build() {
84 _ensureListening();
85
86 return new Container(
87 style: _style,
88 children: [
89 new Container(
90 inlineStyle: _inlineStyle,
91 style: _splashStyle
92 )
93 ]
94 );
95 }
96 }
OLDNEW
« no previous file with comments | « sky/examples/fn/widgets/icon.dart ('k') | sky/examples/fn/widgets/material.dart » ('j') | no next file with comments »

Powered by Google App Engine
This is Rietveld 408576698