mirror of
https://github.com/flame-engine/flame.git
synced 2025-11-01 01:18:38 +08:00
0fd2662d4b
`ColorEffect`'s API was a bit confusing because it used `Offset` for getting values of opacity start and end from user. This PR changes that to use optional `opacityFrom` and `opacityTo` double parameters. It also adds validate checks on these value to make sure that are between 0 and 1.
67 lines
2.1 KiB
Dart
67 lines
2.1 KiB
Dart
import 'package:flame/components.dart';
|
|
import 'package:flame/effects.dart';
|
|
import 'package:flame/game.dart';
|
|
import 'package:flame/input.dart';
|
|
import 'package:flutter/material.dart';
|
|
|
|
class DualEffectRemovalExample extends FlameGame with TapDetector {
|
|
static const String description = '''
|
|
In this example we show how a dual effect can be used and removed.
|
|
To remove an effect, tap anywhere on the screen and the first tap will
|
|
remove the OpacityEffect and the second tap removes the ColorEffect.
|
|
In this example, when an effect is removed the component is reset to
|
|
the state (the part of the state that was affected by the running effect)
|
|
that it had before the effect started running.
|
|
''';
|
|
|
|
late ColorEffect colorEffect;
|
|
late OpacityEffect opacityEffect;
|
|
|
|
@override
|
|
Future<void> onLoad() async {
|
|
final mySprite = SpriteComponent(
|
|
sprite: await loadSprite('flame.png'),
|
|
position: Vector2(50, 50),
|
|
);
|
|
|
|
add(mySprite);
|
|
|
|
final colorController = EffectController(
|
|
duration: 2,
|
|
reverseDuration: 2,
|
|
infinite: true,
|
|
);
|
|
colorEffect = ColorEffect(
|
|
Colors.blue,
|
|
colorController,
|
|
opacityTo: 0.8,
|
|
);
|
|
mySprite.add(colorEffect);
|
|
|
|
final opacityController = EffectController(
|
|
duration: 1,
|
|
reverseDuration: 1,
|
|
infinite: true,
|
|
);
|
|
opacityEffect = OpacityEffect.fadeOut(opacityController);
|
|
mySprite.add(opacityEffect);
|
|
}
|
|
|
|
@override
|
|
void onTap() {
|
|
// apply(0) sends the animation to its initial starting state.
|
|
// If this isn't called, the effect would be removed and leave the
|
|
// component at its current state.
|
|
// Hence when you want an effect to be removed and the component to go
|
|
// back to how it looked prior to the effect, you must call apply(0) before
|
|
// you call removeFromParent().
|
|
if (opacityEffect.isMounted) {
|
|
opacityEffect.apply(0);
|
|
opacityEffect.removeFromParent();
|
|
} else if (colorEffect.isMounted) {
|
|
colorEffect.apply(0);
|
|
colorEffect.removeFromParent();
|
|
}
|
|
}
|
|
}
|