仿抖音小球刷新进度条（两个小球转动），代码很简单

最新推荐文章于 2022-09-23 18:52:39 发布

编程界小明哥

最新推荐文章于 2022-09-23 18:52:39 发布

阅读量3.8k

点赞数 6

分类专栏： javascript canvas javascript精彩实例文章标签： javascript canvas

本文链接：https://blog.csdn.net/dkm123456/article/details/113586884

版权

javascript精彩实例同时被 3 个专栏收录

24 篇文章 30 订阅 ¥39.90 ¥99.00

订阅专栏

超级会员免费看

javascript

78 篇文章 27 订阅

订阅专栏

canvas

42 篇文章 8 订阅

订阅专栏

本文展示了如何使用JavaScript和Canvas创建类似抖音进度条中的小球旋转动画，包括两种不同的实现效果：小球沿着轨道移动和小球大小变化。通过构造函数创建小球，然后进行渲染和动画处理，最终提供完整的封装代码。

摘要由CSDN通过智能技术生成

先看看效果

另外一种效果

实现思路

1.绘制好两个小球

2.让左边小球的圆心X增加，右边小球圆心X的减少，到了一定位置再回转（第1种效果）

让两个小球一个scale增加，一个scale减少，到一定范围后反转（第2种效果）

创建小球的构造函数

//构造函数
	 function Ball(o){
		this.x=0,//圆心X坐标
		this.y=0,//圆心Y坐标
		this.r=0,//半径
		this.startAngle

了解本专栏

订阅专栏解锁全文

超级会员免费看

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

编程界小明哥

关注关注

6
点赞
踩
6

收藏

觉得还不错? 一键收藏
打赏
14
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录

订阅专栏

仿抖音加载动画(两个小球转动)效果

csclmf的博客

05-08

3976

经常玩抖音的小伙伴肯定熟悉抖音的加载效果，但是如何实现的呢？先上效果图：是不是感觉很不错呢？接下来直接上代码： 1、先创建一个attr.xml文件夹用来自定义属性: <?xml version="1.0" encoding="utf-8"?> <resources>  <declare-...

仿抖音加载进度条

weixin_34092455的博客

03-11

2165

最近在一个android学习交流群中看到有同学问仿抖音进度条加载怎么实现，刚好自己在学习自定义view，就尝试实现了一下，效果如下图，在此记录一下实现过程，如有不足，欢迎指正交流。项目地址Demo地址效果分析首先我们来分析这个进度条的效果，可以看到刚开始进度条是固定长度的深灰色的，然后慢慢向两端延伸并且颜色渐变成透明色，到达屏幕两边时完全透明，如此循环，在这个过程中有两个要点：...

14 条评论您还未登录，请先登录后发表或查看评论

Android基础控件——SeekBar的自定义，超短代码模仿抖音带有数字拖拽进度条

点击置顶文章查看博客目录（全站式导航）

12-27

2955

前言在开发中，经常会遇到SeekBar组件的开发，一个高效的自定义SeekBar显得尤为重要，笔者刚好也在项目中大量使用带有数字的拖拽进度条，在深思熟虑后，打算从继承源码形式上，把数字绘制在拖拽进度条上，让拖拽的时候时刻去更新数字。这种实现方式不到100行代码，代码极其精简，功能极其好用，另外，这种方案可以用于各种组件绘制在进度条上方，这块的实现就看需求的具体效果本例子中高仿抖音的进度拖拽效...

SwipeRefreshLayout 安卓上下拉刷新

lhb_11的博客

07-18

657

android 下拉刷新控件介绍之前，先来看一下SwipeRefreshLayout实现的下拉刷新效果图。从图中可以看到，下拉到了一定的高度才会进行刷新，高度不够就会回收上去，正在刷新过程中，继续下拉没反应，说明刷新时屏蔽掉了下拉事件。一、SwipeRefreshLayout简单介绍先看以下官方文档，已有了很详细的描述了。这里我再大概解释一下：在竖直滑动时想要刷新页面可以用SwipeRefresh

Android--仿抖音刷新

子木-沐阳的博客

06-11

337

文章目录前言观察&思考代码实现使用总结前言抖音作为一个国民级的娱乐短视频应用，小编平常的时候也没少刷，往往一刷一关，半天就过去了。作为一个 Android 开发者，玩自家的应用没有玩抖音的时间长，感觉挺丧的。出于一种莫名其妙的心理，就想着从抖音那里偷学一些东西。但是从哪里开始那？想了想，还是先偷一个刷新动画吧。观察&思考先是觉得抖音的刷新动画挺好玩的，然后仔细观察了下。首先它有两个圆，一个红的，一个白的，感官上两个圆像是围着一个大圆在做圆周运动，忽左忽右，忽前忽后的，说明它用到了平移

仿抖音小球刷新进度条

最新发布

09-22

在模仿抖音风格的小球刷新进度条效果时，通常我们会创建一个圆形或椭圆形状的小球动画，随着滚动或数据更新而上下移动，并模拟加载过程中的动态视觉反馈。这个过程可以用CSS3动画配合JavaScript或者HTML5 Canvas实现...

仿QQ邮箱下拉刷新动画（三个小球围绕中心转动）

07-01

QQ邮箱作为一款广受欢迎的邮件服务应用，其独特的下拉刷新动画设计，特别是“三个小球围绕中心转动”的效果，不仅提升了用户在刷新过程中的视觉享受，还增加了操作的趣味性。接下来，我们将深入探讨这个动画效果的...

仿抖音APP

duo_shine的博客

11-21

3208

所有资源及视频均来自抖音APP，代码用以学习目的，如有任何侵权请私信我删除。阉割了无数功能。大概实现了如下效果：录制的像素比较差，没注意上面竟然还留了黑边。。。下面是必读：登录的功能依赖于环信SDK，如果你要下载代码使用，可以将launcher页换为Main，或者你去环信官网申请个应用，免费的，填入key在代码中就可以使用了，没有环信key聊天功能无法使用哦，拍摄视频依赖于美摄SDK，免费版好像就是这么模糊，不知道收费会不会好一些，用过其他的但是注册用户太麻烦。所有滤镜及ui均出自美摄

Android自定义View之仿微信小视频加载进度条

09-05

自定义view之仿微信小视频加载过程的进度条，使用方便

android仿布局,Android仿抖音上下滑动布局

weixin_35693055的博客

05-27

187

抖音上下滑动，监听播放，自动吸顶，吸底效果，供大家参考，具体内容如下使用RecyclerView+PagerSnapHelper实现public class DouYinLayoutManager extends LinearLayoutManager implements RecyclerView.OnChildAttachStateChangeListener{//判断是否上滑还是下滑priv...

基于android的高仿抖音,Android仿抖音列表效果

weixin_28846179的博客

05-25

1169

本文实例为大家分享了Android仿抖音列表效果的具体代码，供大家参考，具体内容如下当下抖音非常火热，是不是也很心动做一个类似的app吗？那我们就用RecyclerView实现这个功能吧，关于内存的回收利用就交给RecyclerView就好了。首先我们先说3个和视频播放暂停相关的接口public interface OnViewPagerListener {/*** 初始化*/void onIni...

android仿抖音上下切换视频,仿抖音上下滑动切换视频

weixin_42299396的博客

05-29

688

package com.example.pagersnaphelper;import android.annotation.SuppressLint;import android.app.Activity;import android.os.Bundle;import android.view.View;import androidx.annotation.Nullable;import andr...

Android 实现seekBar仿抖音拖动后改变thumb kotlin实现

weixin_51143190的博客

09-23

2212

抖音的进度条默认状态下是半透明的灰色，thumb是一个同样的灰色的圆点击、拖动后，progress变为白色，高度变高，thumb变为圆角矩形，没有完全还原，感兴趣的朋友可以再完善一下

纯css3两个小球交替动画js特效

ICode联盟

08-09

247

纯css3两个小球交替动画特效。可以当做loading加载特效。

android抖音loading动画,高仿抖音视频加载动画

weixin_36448964的博客

05-26

758

动画效果:loadingView.gif由于GIF图压缩的问题看起来不好看,在真机和模拟器上看是没有问题的这个动画实现起来还是很容易的,原理其实就是利用CGAffineTransformScale()函数来进行大小缩放,具体开始看代码吧,个人觉得抖音的产品确实厉害,一个小小的加载动画都这么用心,比如之前仿写的高仿拍摄按钮动画地址直接上代码:// 创建加载视图UIView *loadingView...