打球的效果很受欢迎

经常有人在群里跳；

简介

其实我之前也双击过头像，但是没用。我想我当时发送了这条滴答作响的消息，它是隐藏的，最近才发布，我刚刚看到它并开始感受到它。

关于开发

目前我们正在优先实施特殊产品。我估计过几天你就会看到这个项目wechat_flutter。我的想法是添加信息。自定义消息正文，或者更改原来的，例如编辑消息正文的内容，决定何时出现；

处理方法【此行来自Android_ZzT】

我们尽量处理与官方微信客户端一模一样

暴力双击头像就会看到。但只有第一次才会发送消息，其余的双击都会导致客户端“头像晃动”的行为，属于防爆。大约10秒后会恢复，可以再次激活

断网时“爸爸”

断网时，双击头像，你会看到你先看到了“”拍手”，然后过了一会儿，“由于网络原因，对方可能不知道你拍了照片。”这就证明是先执行了客户端的展现逻辑，然后再将请求发送到网络。如果网络不好，请重新进入测试过程，如果最后还是失败，会显示“网络原因失败”字样，“您已经给自己拍了一张照片”。 user profile 是你自己的，没什么特别的，但是当请求失败的时候，复制就不能正常进行了，而且还是显示“别人可能不知道你拍了照片”，我觉得这个复制是写的客户端。如果需要更改，则必须更新版本。

应用

其实主要是利用动画，然后利用TweenSequence制作一系列的补间。动画

 TweenSequence<double>([
      //使用TweenSequence进行多组补间动画
      TweenSequenceItem<double>(tween: Tween(begin: 0, end: 10), weight: 1),
      TweenSequenceItem<double>(tween: Tween(begin: 10, end: 0), weight: 1),
      TweenSequenceItem<double>(tween: Tween(begin: 0, end: -10), weight: 1),
      TweenSequenceItem<double>(tween: Tween(begin: -10, end: 0), weight: 1),
    ])
复制代码

包含在动画元素中。元素调用Transform进行变换；

包含的组件继承AnimatedWidget，然后调用super 绕过发声，

class AnimateWidget extends AnimatedWidget {
  final Widget child;

  AnimateWidget({Animation<double> animation, this.child})
      : super(listenable: animation);

  @override
  Widget build(BuildContext context) {
    final Animation<double> animation = listenable;
    var result = Transform(
      transform: Matrix4.rotationZ(animation.value * pi / 180),
      alignment: Alignment.bottomCenter,
      child: new ClipRRect(
        borderRadius: BorderRadius.all(Radius.circular(5)),
        child: this.child,
      ),
    );
    return result;
  }
}
复制代码

非常简单。

代码在哪里

封装后的代码可以在

/wechat_flutter/lib/ui/view/shake_view.dart

找到，那么项目中调用头像的地方在

/wechat_flutter/lib/ui/message msg_avatar。 dart

可以自行查看如何调用和格式化；

封装代码

import 'dart:math';

import 'package:flutter/material.dart';

/// 封装之后的拍一拍
class ShakeView extends StatefulWidget {
  final Widget child;

  ShakeView({
    this.child,
  });

  _ShakeViewState createState() => _ShakeViewState();
}

class _ShakeViewState extends State<ShakeView>
    with SingleTickerProviderStateMixin {
  Animation<double> animation;
  AnimationController controller;

  initState() {
    super.initState();

    controller = AnimationController(
        duration: const Duration(milliseconds: 500), vsync: this);
    animation = TweenSequence<double>([
      //使用TweenSequence进行多组补间动画
      TweenSequenceItem<double>(tween: Tween(begin: 0, end: 10), weight: 1),
      TweenSequenceItem<double>(tween: Tween(begin: 10, end: 0), weight: 1),
      TweenSequenceItem<double>(tween: Tween(begin: 0, end: -10), weight: 1),
      TweenSequenceItem<double>(tween: Tween(begin: -10, end: 0), weight: 1),
    ]).animate(controller);
    controller.forward();
  }

  Widget build(BuildContext context) {
    return AnimateWidget(animation: animation, child: widget.child);
  }

  dispose() {
    controller.dispose();
    super.dispose();
  }
}

class AnimateWidget extends AnimatedWidget {
  final Widget child;

  AnimateWidget({Animation<double> animation, this.child})
      : super(listenable: animation);

  @override
  Widget build(BuildContext context) {
    final Animation<double> animation = listenable;
    var result = Transform(
      transform: Matrix4.rotationZ(animation.value * pi / 180),
      alignment: Alignment.bottomCenter,
      child: new ClipRRect(
        borderRadius: BorderRadius.all(Radius.circular(5)),
        child: this.child,
      ),
    );
    return result;
  }
}
复制代码

调用示例

这个baby表示点击后要摇一摇Widget内容

new ShakeView(
    child: new Image.network(
    'url',
    height: 50,
     width: 50,
     fit: BoxFit.cover,
   ),
)
复制代码

new ShakeView(
    child: new Image.network(
    'url',
    height: 50,
     width: 50,
     fit: BoxFit.cover,
   ),
)
复制代码

表示你需要摇晃它击中后。 作者：CrazyQ1
链接：https://juejin.im/post/5eeb49a1e51d4573c91b91ab
来源：掘金
版权所有权利归作者所有。如需商业印刷，请联系作者以获得许可。非商业转载请注明来源。