Flutter仿网易云音乐：播放界面，技术详细介绍

child: new Container(
decoration: new BoxDecoration(
color: Colors.grey.shade900,
),
),
),
)),

…
]

这里的高斯模糊sigmaX和sigmaY的值选择了10，然后透明度为0.6，颜色为grey.shade900。

2.黑胶唱头的旋转动画

关于动画的知识这里就不做详细介绍了，可以参考官方文档传送门

自定义动画组件在needle_anim.dart文件里。 这里将动画和组件解耦，分别定义了动画过程类PivotTransition,顾名思义围绕一个支点旋转，继承自AnimatedWidget。

支点定在child组件的topcenter位置。 注意turns不能为空，需要根据turns的值计算旋转绕过的周长，围绕Z轴旋转。

class PivotTransition extends AnimatedWidget {
/// 创建旋转变换
/// turns不能为空.
PivotTransition({
Key key,
this.alignment: FractionalOffset.topCenter,
@required Animation turns,
this.child,
}) : super(key: key, listenable: turns);

/// The animation that controls the rotation of the child.
/// If the current value of the turns animation is v, the child will be
/// rotated v * 2 * pi radians before being painted.
Animation get turns => listenable;

/// The pivot point to rotate around.
final FractionalOffset alignment;

/// The widget below this widget in the tree.
final Widget child;

@override
Widget build(BuildContext context) {
final double turnsValue = turns.value;
final Matrix4 transform = new Matrix4.rotationZ(tu