首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

使用动画颤动使TextField动态变大?

使用动画颤动可以给TextField添加动态变大的效果。可以通过使用Flutter动画库中的AnimatedContainer组件来实现。AnimatedContainer可以在指定的时间内自动执行动画效果。

下面是一个示例代码,展示了如何使用动画颤动使TextField动态变大:

代码语言:txt
复制
import 'package:flutter/material.dart';

class TextFieldShakeAnimation extends StatefulWidget {
  @override
  _TextFieldShakeAnimationState createState() => _TextFieldShakeAnimationState();
}

class _TextFieldShakeAnimationState extends State<TextFieldShakeAnimation> with SingleTickerProviderStateMixin {
  AnimationController _animationController;
  Animation<double> _animation;

  @override
  void initState() {
    super.initState();
    _animationController = AnimationController(
      duration: const Duration(milliseconds: 500),
      vsync: this,
    );

    _animation = Tween<double>(begin: 0, end: 10).animate(
      CurvedAnimation(parent: _animationController, curve: Curves.easeInOut),
    );
  }

  @override
  void dispose() {
    _animationController.dispose();
    super.dispose();
  }

  void _startAnimation() {
    _animationController.reset();
    _animationController.forward();
  }

  @override
  Widget build(BuildContext context) {
    return AnimatedBuilder(
      animation: _animation,
      builder: (BuildContext context, Widget child) {
        return Container(
          margin: EdgeInsets.only(bottom: _animation.value),
          child: TextField(
            decoration: InputDecoration(
              hintText: 'Enter text',
              border: OutlineInputBorder(),
            ),
          ),
        );
      },
    );
  }
}

void main() {
  runApp(MaterialApp(
    home: Scaffold(
      appBar: AppBar(title: Text('TextField Shake Animation')),
      body: Center(
        child: TextFieldShakeAnimation(),
      ),
      floatingActionButton: FloatingActionButton(
        child: Icon(Icons.play_arrow),
        onPressed: () {
          TextFieldShakeAnimationState()._startAnimation();
        },
      ),
    ),
  ));
}

这段代码中,我们创建了一个TextFieldShakeAnimation组件,它继承自StatefulWidget。在_TextFieldShakeAnimationStateinitState方法中,我们初始化了动画控制器_animationController和动画对象_animation。动画对象使用了Tween和CurvedAnimation来定义动画的开始和结束值以及动画曲线。

_TextFieldShakeAnimationStatebuild方法中,我们使用AnimatedBuilder来构建动画,将TextField包裹在Container中,通过修改Container的margin属性来实现动态变大的效果。

最后,我们在主函数中使用TextFieldShakeAnimation组件,并在浮动按钮的onPressed回调函数中调用_startAnimation方法来启动动画。

这是一个简单的示例,你可以根据实际需求来调整动画效果和交互方式。希望对你有所帮助!

请注意,以上示例代码中没有涉及任何腾讯云相关产品。如有需要,请自行参考腾讯云文档来选择适合的产品。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

Android 使用 Path 实现搜索动态加载动画效果

今天实现一个搜索动态加载数据的动画效果,还是先看效果吧,用文字描述干巴巴的,看图说话什么都明白了, ?...实现这个就是使用Path中的getSegment()不断的去改变它截取片段的start和stop,再结合动画,今天就分步骤实现它,看完以后你也会觉的不是很难,只是没想到这么实现而已,所以要多见识,所谓眼界决定你的高度...如果是绘制圆的话,上面的线起点和终点位置怎么去计算,这是个问题,但是我们绘制圆还可以使用绘制椭圆的形式也是可以绘制达到圆的效果,从45度开始绘制一个圆,是不是这个线的起点搞定了,分析图如下: ?...哪我们只要改变startD这个离起始点的位置值就ok,当然有很多种方法,但是Android中基本上都是使用动画,ok,根据这个思路实现这个第二步逻辑: package com.tuya; import...github: https://github.com/zhouguizhi/PathSearch 总结 以上所述是小编给大家介绍的Android 使用 Path 实现搜索动态加载动画效果,希望对大家有所帮助

1.3K21

Android使用动画动态添加商品进购物车

首先得获得这两个点在整个屏幕中的坐标,然后分别计算这两个点的横纵坐标的差值,再通过TranslateAnimation这个类设置小球在X、Y方向上的偏移量,最后通过AnimationSet这个类将这两个动画放在一起执行...这是小球运动的动画,还有就是购物车变大缩小的动画。...这个动画通过ObjectAnimator的ofFloat的方法设置缩放,要注意的是当小球落下的时候,购物车才开始动画,所以要设置一下setStartDelay这个方法。...buyImg.setImageResource(R.drawable.sign);// 设置buyImg的图片 setAnim(buyImg, start_location); } /** * hdh: 创建动画层...X坐标 int endY = end_location[1] - start_location[1];// 动画位移的y坐标 TranslateAnimation translateAnimationX

98820
  • Ask Apple 2022 与 SwiftUI 有关的问答(下)

    A:没有区别,使用这两种方法可以适当地隐藏图像,使其不被辅助技术所发现!accessibilityHidden 支持任意符合 View 协议的元素,同时可以动态调整它的隐藏状态。...ObservableObject 是使视图或视图层次结构的失效( 引发重新计算 )的单元。...鉴于动态文本大小在应用程序运行时可能会发生变化,衡量给定字体的文本大小的最佳方法是什么?A:你好!我们新的布局协议支持这个功能。...但在 macOS 上,它使 CPU 使用率保持在 100%。...然而,两个内容相同的视图之间的交换并不能使视图顺利地产生动画,因为两者的文本也被动画化了。我正在使用仅禁用 TextField 的替代方法,但有没有办法引导动画使用文档中的方法?

    14.8K30

    SceneKit_大神03_3DTitle

    _旋转人物 SceneKit_入门02_如何创建工程 SceneKit_入门03_节点 SceneKit_入门04_灯光 SceneKit_入门05_照相机 SceneKit_入门06_行为动画...材质 SceneKit_入门09_物理身体 SceneKit_入门10_物理世界 SceneKit_入门11_粒子系统 SceneKit_入门12_物理行为 SceneKit_入门13_骨骼动画...SceneKit_中级01_模型之间的过渡动画 SceneKit_中级02_SCNView 详细讲解 SceneKit_中级03_切换照相机视角 SceneKit_中级04_约束的使用 SceneKit..._中级05_力的使用 SceneKit_中级06_场景的切换 SceneKit_中级07_动态修改属性 SceneKit_中级08_阴影详解 SceneKit_中级09_碰撞检测 SceneKit..._中级10_滤镜效果制作 SceneKit_中级11_动画事件 SceneKit_高级01_GLSL SceneKit_高级02_粒子系统深入研究 SceneKit_高级03_自定义力 SceneKit

    75330

    【Flutter 专题】27 易忽略的【小而巧】的技术点汇总 (四)

    CachedNetworkImage 缓存图片 对于加载网络图片时,添加一个加载动画或网络图片异常时添加一个错误图片会给用户一个良好的体验,此时 CachedNetworkImage 可以帮我们解决这个问题...CachedNetworkImage 是一个三方 pub 库,引入的基本方式省略; CachedNetworkImage 中有两个属性很重要: placeholder 用来在加载图片时的缓冲过程,可以是动态...Tips: 在使用加载 loading 或默认图片时,建议限制 loading 和默认图片的大小,这样不会出现默认图片比加载网络图更大的效果。 ? ?...TextInputAction 键盘底部按钮 和尚在使用 TextField 文本框时会对键盘进行操作,为了良好对用户体验。在键盘右下角会有不同的按钮样式。...Flutter 提供了13种状态,但需注意的是有些是区分 Android 和 iOS 的,使用时需加注意。 ?

    1.4K41

    六天完成一个简单iOS App - 第二天

    xib中通过KVC来赋值 因为需要已有账号和注册账号两个界面的切换的动画效果,所以将两个两个输入界面拼接起来,如图所示 ?...占位文字不同状态不同颜色 方法一:addTarget 因为textfield继承于UIControl,所以可以使用addTarget监听textfield编辑状态的改变 [self addTarget...关闭按钮点击事件 - (IBAction)closeBtn { [self dismissViewControllerAnimated:YES completion:nil]; } 点击空白区域使textfield...之前提到,为了避免重复多次的给textfield设置光标颜色和占位文字颜色,我们使用自定义textfield,在awakeFromNib中统一设置即可。...另外设置占位文字颜色,以后再其他模块中或者其他项目中都有可能频繁使用,因此给textfield添加分类,使占位文字的设置更加方便。

    2.1K50

    Unity3D基础知识之 ✨ Stats渲染数据统计窗口

    per frame andFPS) frames per seconds 表示引擎处理和渲染一个游戏帧所花费的时间,该数字主要受到场景中渲染物体数量和 GPU 性能的影响,FPS 数值越高,游戏场景的动画显示会更加平滑和流畅...静态合并会引发内存和存储的额外开销,动态合并会增加 CPU 的负担。 这部分内容参考 Unity 官方文档。 总体上讲所以希望批次渲染的元素要有相同的材质。...另外在使用 ShadowCaster 时,只要材质相同,即使贴图不同也可以合并渲染。 Dynamic Batches 动态合并在满足以下条件时时自动完成的额: 模型总顶点数小于 900。...如果使用动态 lightmap 需要指定正确。 不使用多 Pass 的 Shader。...---- Animations 正在播放动画的数量。

    1.9K30

    【音频处理】Melodyne 自动修正功能 ( 修正音高中心 | 修正音高补偿 | 节拍自动修正 | 量化时间 )

    文章目录 一、音高自动修正功能 二、节拍自动修正功能 一、音高自动修正功能 ---- 仔细观察编辑面板中的音符 , 很少有处于正中心位置的音符 , 大部分音符的音准都不准确 , 这里建议使用自动修正功能...修正音高中心 " 是调整 音符对准 音高网格中心 的精度 , 过分的精准 , 显得很机械 , 这里建议添加一定的误差 ; 如果是制作音源 , 那么必须是 100\% ; " 修正音高补偿 " 用于控制声音的颤动..., 表示的是去除颤音的深度 , 0 是留下所有的声音颤动 , 100 表示 删除所有声音的颤动 ; 二胡 / 小提琴 等弦乐的揉弦等操作 , 这些颤动一般不会超过半音程 , 这些颤动尽量留在声音上..., 这种情况下 修正音高补偿 设置的低一些 , 尽量保留颤音 ; 歌手由于气息不稳定造成的声音发颤 , 需要删除 , 这种情况下修正音高补偿设置的高一些 , 使演唱更加精准 , 不跑调 ; 上述自动修正操作...; 也可以选择不同的 节拍设置 , 让音符进行相应节拍的对齐 ; \cfrac{1}{4} T 表示 四分音符三连音 ; \cfrac{1}{32} T 表示 三十二分音符三连音 ; None 是不使用预置节拍网格

    8.4K10

    Flutter 卡片选择器

    **我们将看到如何在flutter应用程序中使用card_selector包来实现带有动画和堆叠卡的卡选择器的演示程序。...选择器是完全可配置的,动画时间,卡之间的间隙,堆叠卡的尺寸因子。用户可以从左向右或从右向左滑动卡。特定卡上的信息将有所不同。 该演示视频展示了如何在颤动中创建卡选择器。...它显示了flutter应用程序中使用card_selector软件包的卡选择器的工作方式。它显示了堆叠的卡片,动画,从左到右或从右到左刷卡。内容将根据卡而改变。...创建动态列表,并命名为_cards。另外,创建动态地图,并命名为_data。 List _cards; Map _data; 现在,我们将创建initState()。...在内部,我们将添加一个json文件,并添加一个_cards的动态列表,该列表等于json解码。我们还将映射一个等于_cards动态列表的_data并包装在setState()中。

    7.4K20

    前端特效开发 | 图片翻转的制作

    2.2 基本功能逻辑 首先使用JS实现动态添加翻转后展示的信息面板; 然后借助jQuery的hover方法,实现鼠标移入移出的功能; 最后针对不同的翻转变化,让图片与信息面板发生相反的效果展示。...但是在结构的书写中并没有提供面板信息的标签,所以就需要使用JS动态的添加了一个em标签,借助append方法把相应的标签添加到了对应的img标签的后面。如下图所示: ?..., function() { // em标签出现 $(this).hide().next().show(); // em标签动画变大 $(this).next().animate...() { // img标签出现 $(this).hide().prev().show(); // img动画变大 $(this).prev().animate({...// em标签出现 $(this).hide().next().show(); // em标签动画变大

    3.9K71

    TechSmith Camtasia2023功能介绍

    它能在任何颜色模式下轻松记录屏幕动作,支持的输出格式也很多,如MP4、AVI、WMV、M4V、CAMV、RM、MOV、GIF动画等多种常见的格式。...一个简单的时间线使编辑视频变得容易。合并或拆分剪辑、修剪以及加快或减慢素材。然后,立即在视频编辑器中预览。使用专业的视频编辑器效果为视频润色。添加亮点、动画、标题、过渡等。...记录鼠标移动使光标变大动画点击,并添加高亮以使鼠标移动更易于跟踪。显示击键在屏幕上记录击键,以便用户轻松跟进。添加注释和注释拖入注释、标题、形状、突出显示等。Camtasia 可以轻松帮助用户理解。...动态图形分层介绍和结尾序列以及标题动画,以在您的所有视频中创建参与度。音乐曲目使用音乐设置视频的气氛。该编辑器包含一个免版税曲目库,您也可以导入自己的曲目。...zoneid=50621如果大家对camtasia感兴趣的话,可以上camtasia下载使用试试哈。

    1.1K20

    声学工程师应知道的150个声学基础知识(全篇)

    52、声音在室内两面平行墙之间来回反射产生多个同样的声音,称为颤动回声。 53、由于反射使反射声与直达声相差50ms以上,会出现回声。...68、颤动回声的产生是由于声音在两个平行光墙之间来回反射。 69、声聚焦的产生是由于声音遇到凹的反射面。 70、声扩散的产生是由于声音遇到凸的反射面。...111、凹曲面对声波形成集中反射,使声能集中于某一点或某一区域,称为声聚焦。 112、凸曲面对声波反射,使声能形成扩散。 113、人耳分辨两个声音的最小时间间隔是50ms。...121、声源在距离大于一定数值的两个平行界面间产生反射而形成一系列回声,称为颤动回声。 122、声压与基准声压(2×10-5Pa)之比,取10为底的对数乘以20,称为声压级。...147、两面平行墙表面加扩散体或改变平行角度,可以解决颤动回声的缺陷。 148、一支电容话筒最高声压级为126dB,等效噪声级为20dB,其动态范围为106dB。

    2.9K20
    领券