首页 > 其他分享 >SequentialAnimation 和 ParallelAnimation 动画容器

SequentialAnimation 和 ParallelAnimation 动画容器

时间:2023-01-10 16:34:14浏览次数:53  
标签:动画 50 SequentialAnimation duration ParallelAnimation rect

SequentialAnimation中定义的动画是一个接一个地运行的,

以下示例按顺序运行两个数字动画。的矩形动画到 x 的50位,然后到达 y 50的位置。

import QtQuick 2.0

Rectangle {
    id: rect
    width: 100; height: 100
    color: "red"

    SequentialAnimation {
        running: true
        NumberAnimation { target: rect; property: "x"; to: 50; duration: 1000 }
        NumberAnimation { target: rect; property: "y"; to: 50; duration: 1000 }
    }
}

ParallelAnimation中定义的动画是同时运行的。

下面的动画并行运行两个数字动画 ,矩形移动到(50,50)由动画其 x 和 y 同时运行。

import QtQuick 2.0

Rectangle {
    id: rect
    width: 100; height: 100
    color: "red"

    ParallelAnimation {
        running: true
        NumberAnimation { target: rect; property: "x"; to: 50; duration: 1000 }
        NumberAnimation { target: rect; property: "y"; to: 50; duration: 1000 }
    }
}
注意:将动画分组为SequentialAnimation或ParallelAnimation后,就无法单独启动和停止它了;
   在SequentialAnimation或ParallelAnimation必须启动并停止为一组。

标签:动画,50,SequentialAnimation,duration,ParallelAnimation,rect
From: https://www.cnblogs.com/lllion/p/17040673.html

相关文章

  • Antd弹窗无法关闭 也没有动画
    Antd弹窗用方法调用后没有动画且无法关闭constmodal=Modal.info({content:<Tablecolumns={columns}size="small"bordereddataSource={fields}pagination={fa......
  • CSS - 动画,动画的定义,动画全部属性
    1.动画的定义<style>/*只定义起始与结束*/@keyframes动画名称1{from{}to{}}/*用百分比定义动画*/@keyframes动画......
  • Flutter 陈航 22-动画 Animation Hero
    本文地址目录目录目录22|如何构造炫酷的动画效果?Animation案例非线性曲线动画心跳效果简化动画代码AnimatedWidgetAnimatedBuilderHero动画总结22|如何构造炫酷的......
  • Blazor实现菜单动画
    想到动画,你可能会去安装Blazor的动画组件BlazorAnimate,然后使用它。本人初学,暂时我也不知道原理,先不用组件,自己实现吧。虽然项目中我用了AntDesignBlazor,但是我忘了使用它......
  • 云渲染动画价格一般多少?
    云渲染是什么?云渲染就是通过互联网将用户本地需要渲染的文件上传到云端服务器中,再通过云端庞大的计算机集群资源进行运算操作,帮助用户在云端完成渲染工作后,用户再下载到本地......
  • 云渲染动画贵吗_价格一般是多少?
    云渲染是什么?云渲染就是通过互联网将用户本地需要渲染的文件上传到云端服务器中,再通过云端庞大的计算机集群资源进行运算操作,帮助用户在云端完成渲染工作后,用户再下载到本......
  • 自动生成android动画配置文件
    importflash.net.FileReference;importflash.system.System;varxs:XML=<animation-listxmlns:android="http://schemas.android.com/apk/res/android"android:oneshot......
  • 使用React动画库——react-spring
    使用React动画库——react-spring虚拟J关注IP属地:浙江0.722019.11.0816:28:04字数644阅读16,174为了让后台系统视觉体验更好,决定增加过渡动画效果。React官......
  • Andorid自定义动画 文字与画布(一)
    Paint设置//设置画笔宽度paint.setStrokeWidth(5);//指定抗锯齿功能paint.setAntiAlias(true);//绘图样式paint.setStyle(Paint.Style.FILL);//设置文字对齐方式paint.setTe......
  • Unity创建Animation动画无法播放问题
    前提:我是要使用animation的方式去播放动画,而不是animator状态机;是针对unity自己制作的动画,而不是外部导入进来的动画。 发现一个问题,我在unity中给一个cube创建一个animat......