Paint&Canvas实现一个点（图片）在圆形（轨迹）上运动

最新推荐文章于 2023-12-11 10:30:26 发布
最新推荐文章于 2023-12-11 10:30:26 发布
阅读量7.5k 收藏 6
点赞数
CC 4.0 BY-SA版权
分类专栏： Android 文章标签： canvas android Paint 轨迹
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/u011200844/article/details/44568467
本文介绍了如何在Android中实现一个点或图片沿着圆形轨迹运动的效果。通过Canvas和Paint来绘制圆，利用计算和猜想来设计点的运动轨迹。文章列举了实现该效果需要考虑的三个主要步骤：圆的绘制、点（图片）的显示以及运动的模拟，并提供了View的完整代码示例。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

转载请注明出处，谢谢~

这个效果其实还算简单，只是需要一些计算和猜想。首先，我的说，Android Screen Monitor实在是卡，真机不卡的，所以我描述下这个效果吧。。。

就是有一个圆，然后这个圆上有一个点，或者你可以当做是一个图片，在绕着这个圆形轨迹运动，就是这样。

画个图，丑死了。。。。

首先，这个效果的实现需要考虑以下几点：

1.圆怎么实现？

2.点（图片）怎么实现？

3.运动怎么实现？

这是最主要的三点。然后我们一一考虑。

先看圆怎么实现，这种类似运动轨迹的问题，不建议用图片实现，所以这里的圆我们用Canvas和Paint画出来：


                

        

    

    
  


        

            

                      
                        最低0.47元/天 解锁文章
                        

                          
200万优质内容无限畅学

                          
                        

                      
            

        


    



                



	

		

			

				
					
canvas实现按轨迹运动（我们的回忆）功能

				
			

			

				

					Silyeclan的博客
				

				

					08-13
					
					7571
					
				

			

		

		

			
				
canvas实现按轨迹运动（我们的回忆）功能

效果图如下：

实现功能：根据后台数据按轨迹点亮心形，点亮字母，并添加点亮日期，两个人的头像跟随轨迹平行移动，

（移动到第几个字母、日期、头像均通过后台获取，测试时需要自定义才能显示出来）

附加功能：移动端播放声音，H5移动端交互方法



直接上代码，附赠移动端交互方法（以后再详细解说）


<!DOCTYPE html>
<html>
 <head>
 <meta charset="UTF-8">

 &

			
		

	



                

            
              



	

		

			

				
					
canvas动画圆形扩散

				
			

			

				

					行言Tang、
				

				

					06-08
					
					2758
					
				

			

		

		

			
				
var canvasList = document.getElementById('box');
    var canvas = document.createElement('canvas');
    canvasList.appendChild(canvas);
    canvas.width = 600; //
    canvas.height = 600;

			
		

	



              


  
              

                


	

		

			

				
					
canvas进阶之贝塞尔公式推导与物体跟随复杂曲线的轨迹运动

				
			

			

				

					12-02
				

			

		

		

			
				
写在最前
在之前的这篇文章中我们提到了对于贝塞尔公式的运用。本次分享一下如何推导贝塞尔公式以及附一个简单的:chestnut:即小球跟随曲线轨迹运动。
效果预览

demo地址
对于如何绘制连续的贝塞尔曲线可以参照这篇文章：基于canvas使用贝塞尔曲线平滑拟合折线段
在本例中生成的曲线由以上文章中的源码提供。
贝塞尔曲线公式推导

上面这张图是贝塞尔曲线的完整公式，看起来一脸懵逼=。=，因为这是N阶的推导公式，本次我们以一二阶贝塞尔公式的推导来理解一下这个推导公式的由来。先来看下网上流传已久的几张贝塞尔动图：



在这三张图中最重要的部分是我们需要理解变量t。t的取值范围是0-1。从上面的gif中也可以看出

			
		

	





	

		

			

				
					
canvas 实现人物移动轨迹

				
			

			

				

					qq_41429765的博客
				

				

					12-11
					
					1770
					
				

			

		

		

			
				
【代码】canvas 实现人物移动轨迹。

			
		

	



		

			
		



	

		

			

				
					
canvas实现按住鼠标移动绘制出轨迹的示例代码

				
			

			

				

					09-27
				

			

		

		

			
				
本篇文章主要介绍了canvas实现按住鼠标移动绘制出轨迹的示例代码，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧

			
		

	





	

		

			

				
					
canvas动画：圆圈散步

				
			

			

				

					KatyLight的博客
				

				

					12-31
					
					312
					
				

			

		

		

			
				
黑色的小球会移动到圆圈内，每当移动到圆圈内，圆圈就会重新定位，黑色小球就会重新寻找，很适合练手。



圆圈散步.html


<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <script>
    let p1={
      x:100,
      y:100
    }
    le.

			
		

	





	

		

			

				
					
canvas 简单直线轨迹运动与线性插值计算

				
			

			

				

					weixin_42508580的博客
				

				

					11-10
					
					6925
					
				

			

		

		

			
				
canvas 简单直线轨迹运动与线性插值计算

			
		

	





	

		

			

				
					
安卓手绘图片处理画板相关-Android截图圆形Canvas.rar

				
			

			

				

					07-29
				

			

		

		

			
				
"安卓手绘图片处理画板相关-Android截图圆形Canvas.rar"这个压缩包文件主要涉及到如何在Android平台上实现一个自定义的圆形截图功能，并可能包含了一些基于Canvas的图形绘制技术。  首先，Android截图功能通常涉及到...

			
		

	





	

		

			

				
					
编写程序，为一个圆创建动画效果，让圆表示一个行星。即它需要按照一个椭圆形的轨迹运动。要求使用PathTransition

					
最新发布

				
			

			

				

					12-14
				

			

		

		

			
				
在JavaFX中，我们可以利用`PathTransition`类来实现一个圆（代表行星）沿着椭圆轨迹的动画效果。以下是一个简化的示例，假设我们已经有一个`Circle`对象表示行星，并定义了一个`Ellipse`作为它的轨道：  ```java ...

			
		

	





	

		

			

				
					
安卓Android源码——一个涂鸦还有画矩形 圆形的小Demo.zip

				
			

			

				

					10-10
				

			

		

		

			
				
这个“安卓Android源码——一个涂鸦还有画矩形 圆形的小Demo.zip”就是这样一个示例，它包含了一个简单的应用，让用户能够在屏幕上自由涂鸦，并能画出矩形和圆形。下面将详细解析这个Demo中的关键知识点。  首先，这...

			
		

	





	

		

			

				
					
Android绘图canvas 圆周运动两种实现方式

				
			

			

				

					做GIS梦的人
				

				

					01-24
					
					1766
					
				

			

		

		

			
				
Android最近在自定义view，需要做一个圆周运动；


方案一：首先想到的是根据圆的方程，实时递增x值进行，然后实时计算y值，代码如下：
package com.example.demo.practice.ui;

import android.content.Context;
import android.graphics.Canvas;
import android.graphi

			
		

	





	

		

			

				
					
canvas画布实现一个动态效果小demo（滚动圆）

				
			

			

				

					m0_50789201的博客
				

				

					04-23
					
					1643
					
				

			

		

		

			
				
效果展示：



一：分析问题：

首先静态结构是盒子，盒子里面有一个圆。
	这个圆是在盒子内移动。
	移动的过程体现随机性。
	当圆碰到盒子边框时会有反弹效果。
二：解题思路：

明确使用的api是canvas画布。动态效果使用了定时器。
	首先绘制出静态结构。
	计算出圆移动时圆心的坐标。
	计算出圆碰到盒子边框反弹效果的条件。
	使用定时器动态实现效果。
三：代码实现：


<!DOCTYPE html>
<html lang="en">

<head>
    &

			
		

	





	

		

			

				
					
canvas练习，圆形自上向下运动效果实现

				
			

			

				

					oxgos的博客
				

				

					03-07
					
					884
					
				

			

		

		

			
				
canvas,动画效果

			
		

	





	

		

			

				
					
用Canvas画带动画的渐变数字圆环

				
			

			

				

					小小码农
				

				

					04-13
					
					8644
					
				

			

		

		

			
				
先放效果图这是一个自定义view，布局就是一个简单的线性布局而已，通过addview的方式，将自定义view显示出来； 
渐变圆以及外圈圆、外圈小圆是自定义view，其他三个文字是Textview；github的地址：   https://github.com/Hebin320/ArcChart布局代码：         <LinearLayout
            android:id="@

			
		

	





	

		

			

				
					
OpenglES2.0 for Android:来画个圆吧

				
			

			

				

					cassiePython的专栏
				

				

					06-04
					
					1万+
					
				

			

		

		

			
				
OpenglES2.0 for Android:来画个圆吧
首先看看本节的流程：






计算圆的顶点坐标：


我们先要明白OpenglES中圆是怎么画的，前面我们已经知道三角形扇的绘制方式，我们的圆其实也可以看成以圆心为中心点的三角形扇，如下图所示：




看到圆的内部是一个正多边形，当我们的正多边形的边数（或三角形的个数）足够多的话，我们肉眼看起来就变成

			
		

	





	

		

			

				
					
Android入门——利用Canvas完成绘制点、圆、直线、路径、椭圆、多边形等2D图形

					
热门推荐

				
			

			

				

					最美不过，心中有梦，身旁有你！
				

				

					10-07
					
					1万+
					
				

			

		

		

			
				
引言一个成功的APP离不开优秀的UI，像墨迹天气等其他APP的一些精彩特效，仅仅依靠系统自带的UI组件是绝不可能实现。所以Android提供了另一种构造UI组件的方式——通过画布Canvas自己绘画，不夸张地说“只有想不到，没有做不到”配以各种动画效果就能实现。

			
		

	





	

		

			

				
					
用canvas绘制一个圆形，实现绕着一个中心运动

				
			

			

				

					马优晨
				

				

					11-02
					
					5635
					
				

			

		

		

			
				
实现效果  使用canvas绘制一个圆形，实现绕着一个中心，轨迹类似于走一个椭圆的轨迹那样路线，并且实现漂浮的效果。这里只是一个实例Demo，直接运行就可以，下面附上代码：<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content

			
		

	





	

		

			

				
					
flutter开发实战-Canvas绘图之Path路径动画

				
			

			

				

					一名开发者
				

				

					07-17
					
					1440
					
				

			

		

		

			
				
flutter提供一块2D画布Canvas，Canvas内部封装了一些基本绘制的API，开发者可以通过Canvas绘制各种自定义图形。canvas上绘图，有多种不同的方式，常用的就是使用 Path。这里是flutter实现Path路径动画。

			
		

	





	

		

			

				
					
Canvas轨迹

				
			

			

				

					漫游学海之旅
				

				

					12-11
					
					4965
					
				

			

		

		

			
				
http://mapv.baidu.com/examples/#baidu-map-forceEdgeBundling.html主要用到的就2个关键技术点：
ctx.globalAlpha = ‘0.85’; //设置主canvas的绘制透明度
临时canvas备份主canvas的历史图像，再叠加到主canvas上。
绘制过程：
首先需要知道动画的起终点，然后绘制移动的圆，计算出中间的点的位置，定时

			
		

	





	

		

			

				
					
深入探索Canvas绘图技术：Path与Paint的应用

				
			

			

				

					
				

			

		

		

			
				
Path在图形绘制中代表了一个路径，它定义了在Canvas上绘制图形的轨迹。Path可以构成线条、曲线、圆、椭圆、矩形，甚至是由这些基本图形组合而成的复杂形状。  - **创建Path对象**：Path对象是通过调用Path的构造函数...

			
		

	



              




          




        



    





    



      

      

        
      

      





	

		
评论 1

	

  
	




  

    

      添加红包
      
    

    

      

        
        

          
          
        

        
请填写红包祝福语或标题

      

      

        
        

          
          个
        

        
红包个数最小为10个

      

      

        
        

          
          元
        

        
红包金额最低5元

      

      

        
        

          当前余额3.43元
          前往充值 >
        

      

      

        

          需支付：10.00元
        

        
        
      

    

  





  

    
    
  

  

    
    
  








  

    

      

        

          

            
            
成就一亿技术人!

          

          

        

        

          

          

            领取后你会自动成为博主和红包主的粉丝
            规则
          

        

      

      

        

          

            
              
            
            

              
hope_wisdom
 发出的红包
            

          

        

        

          

          

          

        

      

    

    

  



      
      

      
实付元

      
使用余额支付

      

        

          

            
            点击重新获取
          

        

        
扫码支付

      

      

        
          
            
          
          
        
      

      

        
        钱包余额
          0
          

            
            

              

                
抵扣说明：

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

              

            

          

      

      余额充值