fish-redux icon indicating copy to clipboard operation
fish-redux copied to clipboard

能给个组件使用动画的实例吗?

Open huangpgit opened this issue 5 years ago • 4 comments
trafficstars

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.

}

huangpgit avatar Jan 02 '20 08:01 huangpgit

能不能给一个使用动画的最佳实践,搞到现在发现使用成本有点高,好多东西文档根本没有讲

huangpgit avatar Jan 02 '20 08:01 huangpgit

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 avatar Jan 07 '20 07:01 adigest

感谢@adigest

huangpgit avatar Jan 13 '20 07:01 huangpgit

@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'

huangpgit avatar Jan 13 '20 07:01 huangpgit