Animation（五-足球动态移动）

最新推荐文章于 2022-12-03 21:40:18 发布
最新推荐文章于 2022-12-03 21:40:18 发布
阅读量239 收藏
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_42306471/article/details/115468306
版权

我们要实现的效果：

需求分析：

涉及的 Animation：

  • 从左向右的x坐标转换（X1）。
  • 从下往上的y坐标转换（Y1）然后跟着一个从上往下的Y坐标转换（Y2）。
  • 整个动画过程中360度旋转

先做背景：

import QtQuick 2.9
import QtQuick.Window 2.2

Window {
    visible: true
    width: 480
    height: 300

    Item {
        id: root
        anchors.fill: parent
        
        property int duration: 3000

        // 天空渐变
        Rectangle{
            id: sky
            width:parent.width
            height: 200
            gradient: Gradient{
                GradientStop{
                    position: 0.0
                    color: "#0080FF"
                }
                GradientStop{
                    position: 1.0
                    color: "#66CCFF"
                }
            }
        }

        // 大地渐变
        Rectangle{
            id: ground
            x: 0
            width:parent.width
            anchors.topMargin: -3
            anchors.top:sky.bottom
            anchors.bottom:root.bottom
            gradient: Gradient{
                GradientStop{
                    position: 0.0
                    color: "#00FF00"
                }
                GradientStop{
                    position: 1.0
                    color: "#00803F"
                }
            }
        }
    }
}

运行>>

接下来将图片显示在左下角：

        Image {
            id: ball
            x:20
            y:580
            source: "qrc:/new/preImg/soccer_ball.png"

            MouseArea{
                anchors.fill: parent
                //

            }
        }

接下来设置动画：

1）先用一个 SequentialAnimation 容器包含两个“向上移动”和“向下移动”的动画！

import QtQuick 2.9
import QtQuick.Window 2.2

Window {
    visible: true
    width: 1300
    height: 680

    Item {
        id: root
        anchors.fill: parent

        property int duration: 3000

        // 天空渐变
        Rectangle{
            id: sky
            width:parent.width
            height: 500
            gradient: Gradient{
                GradientStop{
                    position: 0.0
                    color: "#0080FF"
                }
                GradientStop{
                    position: 1.0
                    color: "#66CCFF"
                }
            }
        }

        // 大地渐变
        Rectangle{
            id: ground
            x: 0
            width:parent.width
            anchors.topMargin: -3
            anchors.top:sky.bottom
            anchors.bottom:root.bottom
            gradient: Gradient{
                GradientStop{
                    position: 0.0
                    color: "#00FF00"
                }
                GradientStop{
                    position: 1.0
                    color: "#00803F"
                }
            }
        }

        Image {
            id: ball
            x:20
            y:580
            source: "qrc:/new/preImg/soccer_ball.png"

            MouseArea{
                anchors.fill: parent
                //
                onClicked: {
                    ball.x = 20
                    ball.y = 580
                    anim.restart()
                }
            }

            // 连续动画容器包含两个“向上移动”“向下移动”的动画
            SequentialAnimation{
                id:anim
                // 向上移动的动画
                NumberAnimation{
                    target: ball
                    properties: "y"
                    to:20
                    duration: root.duration * 0.4
                }
                // 向下移动的动画
                NumberAnimation{
                    target: ball
                    properties: "y"
                    to:580
                    duration: root.duration * 0.6
                }
            }
        }
    }
}

OK，移动事件成功！

2）加入横向移动的动画

我们上一步将向上移动和向下移动的动画加在一个连续动画容器中的原因是因为我们希望足球可以一边向上/向下移动的同时还能向右移动，那么就需要将前面一个动画容器和一个向右移动的动画封装在一个平行动画容器里面！

        Image {
            id: ball
            x:20
            y:580
            source: "qrc:/new/preImg/soccer_ball.png"

            MouseArea{
                anchors.fill: parent
                //
                onClicked: {
                    ball.x = 20
                    ball.y = 580
                    anim.restart()
                }
            }

            ParallelAnimation{
                id:anim
                // 连续动画容器包含两个“向上移动”“向下移动”的动画
                SequentialAnimation{
                    // 向上移动的动画
                    NumberAnimation{
                        target: ball
                        properties: "y"
                        to:20
                        duration: root.duration * 0.4
                    }
                    // 向下移动的动画
                    NumberAnimation{
                        target: ball
                        properties: "y"
                        to:580
                        duration: root.duration * 0.6
                    }
                }

                // 水平移动的动画
                NumberAnimation{
                    target: ball
                    properties: "x"
                    to:1200
                    duration: root.duration
                }
            }

OK，现在足球能上下移动的同时并且能向右移动，但是足球是不滚动的！

3）加入足球滚动：


                // 足球滚动
                RotationAnimation{
                    target: ball
                    properties: "rotation"
                    // 一直滚动
                    to: 720
                    duration: root.duration
                }

加入上面代码足球就能滚动了，这里就不截图了！

4）加入缓冲曲线

import QtQuick 2.9
import QtQuick.Window 2.2

Window {
    visible: true
    width: 1300
    height: 680

    Item {
        id: root
        anchors.fill: parent

        property int duration: 3000

        // 天空渐变
        Rectangle{
            id: sky
            width:parent.width
            height: 500
            gradient: Gradient{
                GradientStop{
                    position: 0.0
                    color: "#0080FF"
                }
                GradientStop{
                    position: 1.0
                    color: "#66CCFF"
                }
            }
        }

        // 大地渐变
        Rectangle{
            id: ground
            x: 0
            width:parent.width
            anchors.topMargin: -3
            anchors.top:sky.bottom
            anchors.bottom:root.bottom
            gradient: Gradient{
                GradientStop{
                    position: 0.0
                    color: "#00FF00"
                }
                GradientStop{
                    position: 1.0
                    color: "#00803F"
                }
            }
        }

        Image {
            id: ball
            x:20
            y:580
            source: "qrc:/new/preImg/soccer_ball.png"

            MouseArea{
                anchors.fill: parent
                //
                onClicked: {
                    ball.x = 20
                    ball.y = 580
                    anim.restart()
                }
            }

            ParallelAnimation{
                id:anim
                // 连续动画容器包含两个“向上移动”“向下移动”的动画
                SequentialAnimation{
                    // 向上移动的动画
                    NumberAnimation{
                        target: ball
                        properties: "y"
                        to:20
                        duration: root.duration * 0.4
                        // OutCirc类型缓冲曲线
                        easing.type: Easing.OutCirc
                    }
                    // 向下移动的动画
                    NumberAnimation{
                        target: ball
                        properties: "y"
                        to:580
                        duration: root.duration * 0.6
                        // OutBounce类型缓冲曲线
                        easing.type: Easing.OutBounce
                    }
                }

                // 水平移动的动画
                NumberAnimation{
                    target: ball
                    properties: "x"
                    to:1200
                    duration: root.duration
                }

                // 足球滚动
                RotationAnimation{
                    target: ball
                    properties: "rotation"
                    to: 720
                    duration: root.duration * 1.1
                }
            }
        }
    }
}

以上是最终代码！

最终效果>>

应该说还是挺惊艳的！

柔弱胜刚强.
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
前端svg路径path指令动画（一）
RIDER_hjf的博客
03-31 1467
一、svg 的 path 介绍 1.1 path元素的形状是通过属性d来定义的，属性d的值是一个命令+参数的序列。 1.2 path 指令 M = moveto(M X,Y) ： 将画笔移动到指定的坐标位置 L = lineto(L X,Y) ：画直线到指定的坐标位置 H = horizontal lineto(H X)：画水平线到指定的X坐标位置 V = vertical lineto(V Y...
H5动画：轨迹移动
前端栈开发
07-10 1万+
在 Web 开发中，经常需要实现各种动画效果，例如：移动、变形、透明度变化等，今天我们主要来讨论各种移动的实现。直线移动通常可以直接由各个点的位置，以及到点的时间与整个动画持续时间的比值，写出类似下面的代码并可实现动画。12345678910.cray { animation: move 2s alternate infinite;}@keyframes move { 0% { transfo...
【疯狂世界杯】css 动画实现跳动的足球
热门推荐
阿牛的博客
12-03 1万+
2022卡塔尔世界杯正在如火如荼的进行之中，作为“诸神的黄昏”，本届世界杯备受瞩目，足坛巅峰老将c罗，梅西，内马尔也将随本次世界杯退役，一代人的青春到此结束！本篇博客我将用css动画写一个简单的跳动的足球，适合初学者练习css动画，赶紧学起来吧！
Android利用自定义View实现简单的足球战术板
champion0324的博客
04-25 2174
参考自：http://blog.csdn.net/lmj623565791/article/details/46858663 学习Android初期，之前接触了一些UI设计，突发奇想想要做一个简单的足球战术板（自己是个足球爱好者）。 原理很简单，也就是一个令View移动。 参考了网上有很多种方法，我这里是选择了写一个类继承LinearLayout的方式，实现View移动的目的。 先看一下效
SportsScore:显示不同运动项目得分的Android应用程序。 用户可以选择板球，足球，篮球和网球运动。 使用Android Studio开发的应用程序
05-25
体育成绩 显示不同运动项目得分的Android应用程序。 用户可以选择板球，足球，篮球和网球运动。 使用Android Studio开发的应用程序。 显示的分数是静态的。 目标是演示UI / UX部分，例如回收视图，动画，共享意图，操作栏搜索。
Android应用源码之疯狂足球源码-IT计算机-毕业设计.zip
04-06
《疯狂足球》是一款Android平台上的移动应用程序，其源码提供了丰富的学习材料，尤其适用于计算机科学与技术专业的学生进行毕业设计。这份源码不仅涵盖了基本的Android应用开发技术，还可能包含了一些高级特性和优化...
Android应用源码之体育游戏-疯狂足球源码.zip
12-17
6. **动画效果**：Android的`Animation`和`Property Animation`框架可用于创建游戏中的动态效果，如球员跑动、球的抛物线轨迹等。 7. **多线程与异步处理**：游戏运行时，为了保持流畅性，图形渲染通常在独立的线程...
安卓Android源码——体育游戏-疯狂足球源码.zip
10-12
疯狂足球源码中可能包含了XML布局文件，用于定义游戏界面的布局和控件，以及自定义View或者SurfaceView来实现动态的游戏画面。 接着，游戏逻辑的实现离不开Java编程语言。开发者可能会使用面向对象的设计模式，如...
Flutter-Hockey-Live-Score-App:足球实时比分应用
04-14
【标题】: "Flutter-Hockey-Live-Score-App: 足球实时比分应用" 在本文中，我们将深入探讨如何使用Flutter框架开发一个实时更新的足球比赛分数应用程序。Flutter是由Google开发的一个开源UI工具包，它允许开发者...
android 足球游戏源码
12-23
很好的游戏源码，实现了游戏开发的基本流程，让你感觉到不一样的游戏开发，android世界游戏开发魅力无穷
jQuery动画特效
m0_51281306的博客
03-24 1993
1.1基本动画 hide():隐藏HTML元素 show():显示HTML元素 toggle():show()和Hide()的切换。 语法 $(selector).show(speed,easing,callback) speed 可选。规定显示效果的速度。 可能的值：毫秒 "slow" "fast" easing 可选。规定在动画的不同点上元素的速度。 默认值为 "swing"。 可能的值： "swing" - 在开头/结尾移动慢，在中间移动快 "linear" - 匀速移动 c
Android实现小球一直运动
Happy_Develop_的专栏
01-05 2145
private ObjectAnimator objectAnimator1; private ObjectAnimator objectAnimator2;private ObjectAnimator objectAnimator3;private ObjectAnimator objectAnimator4; 之前一直想着用死循环让动画一直运动，一点开始就崩溃； 只要是在最后一个而动
android 小球碰撞动画,Android 移动小球+CircularReveal页面切换揭露动画
weixin_34088048的博客
05-25 257
效果图如下ScreenGif.gif是在fragment中跳转activity实现的效果，fragment跳fragment，activity跳activity类似~~实现过程重写FloatingActionButton的onTouchListener()方法，使小球可以移动,并判断边界点击fab时记录坐标传到下一个页面,在下一个页面展示动画。点击后退或者重写onBackPressed()方法，执...
android 疯狂足球原码,基于Android的疯狂足球游戏源代码
weixin_39965673的博客
05-25 1048
基于Android的疯狂足球游戏源代码。相关文件下载在Linux公社的1号FTP服务器里，下载地址：用户名：www.linuxidc.com密码：www.muu.cc在 2011年LinuxIDC.com\10月\10月\基于Android的疯狂足球游戏源代码示例：package wyf.wpf;//声明包语句import android.content.res.Resources;impo...
android 组件动画(一)——球的进入效果
dianluanbi7490的博客
04-10 87
首先看看效果： // 宽和高 private int width = 100; private int height = 100; 其实获取屏幕宽高的原因是为了适应android多种屏幕的变化，虽然很多时候可以用xml里的dip定位，但是更多时候却需要动态添加一些组件，然而在代码里面设置的值都是以xp来计算的，这样做出来的软件或者游戏根本就不能很好的适应屏幕。所以，如果...
android自定义足球阵容,Android开发自定义控件实现一个足球积分榜RankBar
weixin_33437929的博客
05-27 884
为了实现一个如下图红色方框所示的控件，系统自带控件并不能满足要求，因此需要继承View重新画一个这样的控件分析此控件发现分为3部分，中间的一列横线和左右两个标签中间的部分好绘制，通过循环调用canvas的drawLine方法即可然后分析左右两边的两个标签，因为左右两个是一样的，因此只分析左边的外围形状是一个圆环被拉出来了一个三角形，这个三角形是等边三角形，等边三角形的上边顶点设为tt，下边顶点设为...
Android动画之旅(三)----6个小球移动的轨迹动画
余杭探险家
02-28 5352
动画组成:1.贝塞尔曲线和PathMeasure结合使用。2. mPathMeasure.getPosTan（float v,float [] pos ,float[] tan）的使用。3.通过动画0到1形成轨迹动画。package com.example.administrator.animationworkdemo.views;import android.animation.Animator;
android自定义动画实现牛顿撞球
acxingyun的博客
09-30 612
效果最近实现了一个不错的自定义view，类似在商店里看到的牛顿撞球，先上效果： 一个球摆动： 两个球摆动： 三个球摆动： 感谢mp4转gif网站，甩格式工厂10条街：https://ezgif.com/video-to-gif 一开始的想法就是做一个等待时的动画效果，好看的动画效果能让用户耐心等待，撞球是我比较喜欢的效果。使用小球个数、颜色、半径、摆动球个数、最大摆动角度等都可以使
常用jQuery动画效果
fan_ge_的博客
05-17 1242
常用jQuery动画效果汇总 jQuery animate() 方法用于创建自定义动画。 语法： $(selector).animate({params},speed,callback); 必需的 params 参数定义形成动画的 CSS 属性。 可选的 speed 参数规定效果的时长。它可以取以下值：“slow”、“fast” 或毫秒。 可选的 callback 参数是动画完成后所执行的函数名称。 接下来进行css样式和html基本布局： <style> #content
介绍CSS3动画常用属性的视频脚本，包含animation-duration、animation-name animation-delay animation-iteration-count animation-direction字数1000字左右
最新发布
06-02
非常感谢您的提问，以下是关于CSS3动画常用属性的视频脚本，其中包括animation-duration、animation-name、animation-delay、animation-iteration-count和animation-direction的详细介绍。 CSS3动画是为了能够在...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

柔弱胜刚强.

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值