fish-redux
fish-redux copied to clipboard
能给个组件使用动画的实例吗?
Effect<ScoreState> buildEffect() { return combineEffects(<Object, Effect<ScoreState>>{ Lifecycle.initState: _initState, Lifecycle.dispose: _dispose, }); } void _dispose(Action action, Context<ScoreState> ctx) {
ctx.state.controller.dispose(); //报错 AnimationController.dispose() called more than once.
}
能不能给一个使用动画的最佳实践,搞到现在发现使用成本有点高,好多东西文档根本没有讲
class WelcomeState implements Cloneable<WelcomeState>, GlobalBaseState {
//动画控制器
AnimationController controller;
int duration;
Animation<double> paoAnimation;
Animation<double> headAnimation;
@override
WelcomeState clone() {
return WelcomeState()
..controller = controller
..duration = duration
..paoAnimation = paoAnimation
..headAnimation = headAnimation
..globalModel = globalModel;
}
@override
String pageTag = "WelcomePage";
@override
GlobalModel globalModel;
}
WelcomeState initState(Map<String, dynamic> args) {
WelcomeState newState = WelcomeState();
newState.duration = 1888;
return newState;
}
Effect<WelcomeState> buildEffect() {
return combineEffects(<Object, Effect<WelcomeState>>{
Lifecycle.initState: _initState,
Lifecycle.dispose: _dispose,
WelcomeAction.onTouchEvent: _onTouchEvent,
WelcomeAction.onTitleClick: _onTitleClick,
});
}
void _initState(Action action, Context<WelcomeState> ctx) {
GlobalStore.store.dispatch(GlobalActionCreator.changeRobotVisitFlag(false));
final TickerProvider tickerProvider = ctx.stfState as TickerProvider;
// 创建 AnimationController 对象
ctx.state.controller = AnimationController(
vsync: tickerProvider,
duration: Duration(milliseconds: ctx.state.duration))
..addStatusListener((status) {
// 动画无限执行
if (status == AnimationStatus.completed) {
ctx.state.controller.reverse();
} else if (status == AnimationStatus.dismissed) {
ctx.state.controller.forward();
}
});
ctx.dispatch(WelcomeActionCreator.createController(ctx.state.controller));
}
void _dispose(Action action, Context<WelcomeState> ctx) {
ctx.state.controller.dispose();
}
Reducer<WelcomeState> buildReducer() {
return asReducer(
<Object, Reducer<WelcomeState>>{
WelcomeAction.createController: _createController,
},
);
}
WelcomeState _createController(WelcomeState state, Action action) {
final WelcomeState newState = state.clone();
newState.controller = action.payload;
newState.paoAnimation =
Tween(begin: 0.15, end: 0.75).animate(newState.controller);
newState.headAnimation =
Tween(begin: -0.002, end: 0.015).animate(newState.controller);
newState.controller.forward();
return newState;
}
view里的图片,自行替换
Visibility(
visible: true,
child: Stack(
children: <Widget>[
Container(
alignment: Alignment(-0.08, 1.005),
child: Container(
width: 368 * 0.46,
height: 284 * 0.46,
child: Image(
image:"图片",
),
),
),
Container(
alignment: Alignment(-0.08, -1.3),
child: Container(
width: 754 * 0.5,
height: 601 * 0.5,
child: RotationTransition(
alignment: Alignment.center,
turns: state.headAnimation,
child: Image(
image: image:"图片",
),
),
),
),
Container(
alignment: FractionalOffset(0.96, 0.845),
child: Transform.rotate(
angle: 0.5 * state.paoAnimation.value,
alignment: Alignment.center,
child: ScaleTransition(
alignment: Alignment.topLeft,
scale: state.paoAnimation,
child: Image(
image: image:"图片",
),
),
),
),
],
),
),
感谢@adigest
@adigest 我是在list的cell component中使用动画的,滚动还是会出现问题。
AnimationController.forward() called after AnimationController.dispose() AnimationController methods should not be used after calling dispose. 'package:flutter/src/animation/animation_controller.dart': Failed assertion: line 451 pos 7: '_ticker != null'