mirror of
https://github.com/flutter/flutter.git
synced 2025-06-03 00:51:18 +00:00
Add a simple inksplash example
We'll eventually turn this into a full fn2 component, but for now it's just an example. To make this work, I created a schedule.dart as a start to implementing scheduler.md. For now, I've kept the API similar to the web platform so that the old world can continue use it backed by sky.window.requestAnimationFrame. R=eseidel@chromium.org BUG= Review URL: https://codereview.chromium.org/1145973009
This commit is contained in:
parent
dbbe62ea8f
commit
04169c4ce3
70
examples/raw/ink_well.dart
Normal file
70
examples/raw/ink_well.dart
Normal file
@ -0,0 +1,70 @@
|
||||
// Copyright 2015 The Chromium Authors. All rights reserved.
|
||||
// Use of this source code is governed by a BSD-style license that can be
|
||||
// found in the LICENSE file.
|
||||
|
||||
import 'dart:sky' as sky;
|
||||
import 'package:sky/framework/app.dart';
|
||||
import 'package:sky/framework/rendering/render_box.dart';
|
||||
import 'package:sky/framework/rendering/render_node.dart';
|
||||
import 'package:sky/framework/animation/animated_value.dart';
|
||||
import 'package:sky/framework/animation/curves.dart';
|
||||
|
||||
const double _kInitialSize = 0.0;
|
||||
const double _kTargetSize = 100.0;
|
||||
const double _kSplashDuration = 500.0;
|
||||
const int _kInitialOpacity = 0x80;
|
||||
|
||||
class InkSplash {
|
||||
final InkWell inkWell;
|
||||
final sky.Paint _paint = new sky.Paint();
|
||||
final sky.Point position;
|
||||
AnimatedValue radius;
|
||||
|
||||
InkSplash({ this.position, this.inkWell }) {
|
||||
radius = new AnimatedValue(_kInitialSize, onChange: _handleRadiusChange);
|
||||
radius.animateTo(_kTargetSize, _kSplashDuration, curve: easeOut);
|
||||
}
|
||||
|
||||
void _handleRadiusChange() {
|
||||
if (radius.value == _kTargetSize)
|
||||
inkWell._splashes.remove(this);
|
||||
inkWell.markNeedsPaint();
|
||||
}
|
||||
|
||||
void paint(RenderNodeDisplayList canvas) {
|
||||
int opacity = (_kInitialOpacity * (1.0 - (radius.value / _kTargetSize))).floor();
|
||||
_paint.color = opacity << 24;
|
||||
canvas.drawCircle(position.x, position.y, radius.value, _paint);
|
||||
}
|
||||
}
|
||||
|
||||
class InkWell extends RenderBox {
|
||||
final List<InkSplash> _splashes = new List<InkSplash>();
|
||||
|
||||
void handlePointer(sky.PointerEvent event) {
|
||||
switch (event.type) {
|
||||
case 'pointerdown':
|
||||
_splashes.add(new InkSplash(position: new sky.Point(event.x, event.y),
|
||||
inkWell: this));
|
||||
break;
|
||||
}
|
||||
markNeedsPaint();
|
||||
}
|
||||
|
||||
void performLayout() {
|
||||
size = constraints.constrain(new sky.Size.infinite());
|
||||
}
|
||||
|
||||
void paint(RenderNodeDisplayList canvas) {
|
||||
canvas.drawRect(new sky.Rect.fromLTRB(0.0, 0.0, size.width, size.height),
|
||||
new sky.Paint()..color = 0xFFCCCCCC);
|
||||
for (InkSplash splash in _splashes)
|
||||
splash.paint(canvas);
|
||||
}
|
||||
}
|
||||
|
||||
AppView app;
|
||||
|
||||
void main() {
|
||||
app = new AppView(new InkWell());
|
||||
}
|
@ -61,6 +61,10 @@ class RenderTouchDemo extends RenderBox {
|
||||
markNeedsPaint();
|
||||
}
|
||||
|
||||
void performLayout() {
|
||||
size = constraints.constrain(new Size.infinite());
|
||||
}
|
||||
|
||||
void paint(RenderNodeDisplayList canvas) {
|
||||
dots.forEach((_, Dot dot) {
|
||||
dot.paint(canvas);
|
||||
|
Loading…
Reference in New Issue
Block a user