| OLD | NEW |
| 1 // Copyright 2015 The Chromium Authors. All rights reserved. | 1 // Copyright 2015 The Chromium Authors. All rights reserved. |
| 2 // Use of this source code is governed by a BSD-style license that can be | 2 // Use of this source code is governed by a BSD-style license that can be |
| 3 // found in the LICENSE file. | 3 // found in the LICENSE file. |
| 4 | 4 |
| 5 import 'dart:sky' as sky; | 5 import 'dart:sky' as sky; |
| 6 | 6 |
| 7 import '../animation/animated_value.dart'; | 7 import '../animation/animation_performance.dart'; |
| 8 import '../animation/curves.dart'; | 8 import '../animation/curves.dart'; |
| 9 import 'animated_component.dart'; | 9 import 'animated_component.dart'; |
| 10 import 'basic.dart'; | 10 import 'basic.dart'; |
| 11 | 11 |
| 12 typedef void ValueChanged(value); | 12 typedef void ValueChanged(value); |
| 13 | 13 |
| 14 const double _kCheckDuration = 200.0; | 14 const Duration _kCheckDuration = const Duration(milliseconds: 200); |
| 15 | 15 |
| 16 abstract class Toggleable extends AnimatedComponent { | 16 abstract class Toggleable extends AnimatedComponent { |
| 17 | 17 |
| 18 Toggleable({ | 18 Toggleable({ |
| 19 String key, | 19 String key, |
| 20 this.value, | 20 this.value, |
| 21 this.onChanged | 21 this.onChanged |
| 22 }) : super(key: key) { | 22 }) : super(key: key) { |
| 23 toggleAnimation = new AnimatedValue(value ? 1.0 : 0.0); | 23 position = new AnimatedType<double>(0.0, end: 1.0); |
| 24 watch(toggleAnimation); | 24 performance = new AnimationPerformance() |
| 25 ..variable = position |
| 26 ..duration = _kCheckDuration |
| 27 ..progress = value ? 1.0 : 0.0; |
| 28 watchPerformance(performance); |
| 25 } | 29 } |
| 26 | 30 |
| 27 bool value; | 31 bool value; |
| 28 AnimatedValue toggleAnimation; | |
| 29 ValueChanged onChanged; | 32 ValueChanged onChanged; |
| 30 | 33 |
| 34 AnimatedType<double> position; |
| 35 AnimationPerformance performance; |
| 36 |
| 31 void syncFields(Toggleable source) { | 37 void syncFields(Toggleable source) { |
| 32 onChanged = source.onChanged; | 38 onChanged = source.onChanged; |
| 33 if (value != source.value) { | 39 if (value != source.value) { |
| 34 value = source.value; | 40 value = source.value; |
| 35 double targetValue = value ? 1.0 : 0.0; | 41 // TODO(abarth): Setting the curve on the position means there's a |
| 36 double difference = (toggleAnimation.value - targetValue).abs(); | 42 // discontinuity when we reverse the timeline. |
| 37 if (difference > 0) { | 43 if (value) { |
| 38 toggleAnimation.stop(); | 44 position.curve = curveUp; |
| 39 double t = difference * duration; | 45 performance.play(); |
| 40 Curve curve = targetValue > toggleAnimation.value ? curveUp : curveDown; | 46 } else { |
| 41 toggleAnimation.animateTo(targetValue, t, curve: curve); | 47 position.curve = curveDown; |
| 48 performance.reverse(); |
| 42 } | 49 } |
| 43 } | 50 } |
| 44 super.syncFields(source); | 51 super.syncFields(source); |
| 45 } | 52 } |
| 46 | 53 |
| 47 void _handleClick(sky.Event e) { | 54 void _handleClick(sky.Event e) { |
| 48 onChanged(!value); | 55 onChanged(!value); |
| 49 } | 56 } |
| 50 | 57 |
| 51 // Override these methods to draw yourself | 58 // Override these methods to draw yourself |
| 52 void customPaintCallback(sky.Canvas canvas, Size size) { | 59 void customPaintCallback(sky.Canvas canvas, Size size) { |
| 53 assert(false); | 60 assert(false); |
| 54 } | 61 } |
| 55 Size get size => Size.zero; | 62 Size get size => Size.zero; |
| 56 EdgeDims get margin => const EdgeDims.symmetric(horizontal: 5.0); | 63 EdgeDims get margin => const EdgeDims.symmetric(horizontal: 5.0); |
| 57 double get duration => 200.0; | 64 double get duration => 200.0; |
| 58 Curve get curveUp => easeIn; | 65 Curve get curveUp => easeIn; |
| 59 Curve get curveDown => easeOut; | 66 Curve get curveDown => easeOut; |
| 60 | 67 |
| 61 Widget build() { | 68 Widget build() { |
| 62 return new Listener( | 69 return new Listener( |
| 63 child: new Container( | 70 child: new Container( |
| 64 margin: margin, | 71 margin: margin, |
| 65 width: size.width, | 72 width: size.width, |
| 66 height: size.height, | 73 height: size.height, |
| 67 child: new CustomPaint( | 74 child: new CustomPaint( |
| 68 token: toggleAnimation.value, | 75 token: position.value, |
| 69 callback: customPaintCallback | 76 callback: customPaintCallback |
| 70 ) | 77 ) |
| 71 ), | 78 ), |
| 72 onGestureTap: _handleClick | 79 onGestureTap: _handleClick |
| 73 ); | 80 ); |
| 74 } | 81 } |
| 75 } | 82 } |
| OLD | NEW |