tree.js 流波纹效果

2026-09-03

ThreeJS实现波纹粒子效果

今天我们来用ThreeJS的库实现一个波纹粒子效果,我们用到的ThreeJS的库有CanvasRenderer.js,OrbitControls.js,Projector.js,stats.min.js和three.js.这些库都是不可或缺的,我们先来看看实现的效果,如下图所示. 我们再来看看项目结构是怎么样的,项目结构如下图所示. 我们的效果全部写在了index.html里,现在我们直接贴出index.html的代码,同学们可以直接拿来运行,代码如下. <!DOCTYPE html> <

jquery ripples水波纹效果( 涟漪效果)

这个效果是我从bootstrap-material-design上面分离下来的,bootstrap-material-design的一些组件样式我不太不喜欢,但是非常喜欢这个水波纹效果,所以就有了这篇文章: 先上效果图: 点击按钮后,会有一道波纹扩散开来下面是资源地址:http://pan.baidu.com/s/1pL6LGBh 提取密码: 7y6x 就两文件: 下面是使用教程: 第一步:引入rippels.css 和rippels.js <link rel="stylesheet&q

如何使用 HTML5 Canvas 制作水波纹效果

今天,我们继续分享 JavaScript 实现的效果例子,这篇文章会介绍使用 JavaScript 实现水波纹效果.水波效果以图片为背景,点击图片任意位置都会触发.有时候,我们使用普通的 Javascript 就可以创建一个很有趣的解决功能. 在线演示源码下载 Step 1. HTML 和以前一样,首先是 HTML 代码: <!DOCTYPE html> <html> <head> <meta charset=utf-8 /> <title

css 滚动视差之水波纹效果

核心属性: background-attachment 这个属性就牛逼了, 它可以定义背景图片是相对视口固定, 还是随着视口滚动, 加上这个属性网页瞬间就从屌丝变成高大上. 我们来看个例子: html: <div class="attach view"></div> <div class="text view">I WANT FLY</div> <div class="attach view"

原生JS实现弹幕效果

纯属无聊写的,可能有很多问题,欢迎批评指教. 效果图:图一是预设的一些弹幕,图二是自己发射的弹幕,效果是一样的. 首先是弹幕的位置,是要从最右滑到最左,为了防止随机高度弹幕会覆盖的问题,设置了通道. 每一个通道是从左到右的一条,高度固定,这样不同通道的弹幕不会相互覆盖. 弹幕滑动就是简单设置CSS属性 transition 实现.开始使用 left 改变弹幕的位置,后来改为 transform ,性能确实提高很多. 设置10条弹幕通道,每个通道有一个DOM池,每一次发射弹幕就从DOM池中拿

React.js实现原生js拖拽效果及思考

一.起因&思路不知不觉,已经好几天没写博客了...近来除了研究React,还做了公司官网... 一直想写一个原生js拖拽效果,又加上近来学react学得比较嗨.所以就用react来实现这个拖拽效果. 首先,其实拖拽效果的思路是很简单的.主要就是三个步骤: 1.onmousedown的时候,启动可拖拽事件,记录被拖拽元素的原始坐标参数. 2.onmousemove的时候,实时记录鼠标移动的距离,结合被拖拽元素第一阶段的坐标参数,计算并设置新的坐标值. 3.onmouseup的时候,关闭可拖拽事件

用js实现动画效果核心方式

为了做好导航菜单,有时候需要在菜单下拉的时候实现动画效果,所以这几天就研究了研究如何用js实现动画效果,实现动画核心要用到两个函数,一个是setTimeOut,另一个是setInterval. 下边我就简单说一下过程和原理. 第一步:实现一个匿名函数并能自己执行. (function(){ })() 这个函数在一样编的好的JS代码中经常会见到,起到闭包,自动执行的效果,在函数后加一对()表示自动执行,前边的匿名函数需要用()包起来,这样才能为宿主(我们的BOM环境)理解,里面的function(

js拖拽效果

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>js拖拽效果</title> </head> <body> <script type="text/javascript"> var oDiv = document.getElementById('log

原生JS实现分页效果2.0（新增了上一页和下一页，添加当前元素样式）

虽然写的很烂,但至少全部都是自己写的,因为这个没有固定的顺序,所以就没有封装,如果你技术好的话,可以你写的分享给我,谢谢. <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>原生JS实现分页效果</title> <style> body{ margin:100px 200px; } #page{ m

原生JS实现分页效果1.0

不太完整,写的太急,等等加上完整注释,写起来还是有些难度的,写的有点水,后面再改进改进. <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>原生JS实现分页效果</title> <style> body{ margin:100px 200px; } #page{ margin:20px 0; } #

兼容Android的水波纹效果

Android的水波纹效果只有高版本才有,我们希望自己的应用在低版本用低版本的阴影,高版本用水波纹,这怎么做呢?其实,只要分drawable和drawablev21两个文件夹就好了. 普通情况下的selector: <?xml version="1.0" encoding="utf-8"?> <selector xmlns:android="http://schemas.android.com/apk/res/android"&

android自定义控件(4)-自定义水波纹效果

一.实现单击出现水波纹单圈效果: 照例来说,还是一个自定义控件,观察这个效果,发现应该需要重写onTouchEvent和onDraw方法,通过在onTouchEvent中获取触摸的坐标,然后以这个坐标值为圆心来绘制我们需要的图形,这个绘制过程就是调用的onDraw方法. 1.新建一个工程,定义一个WaterWave的类,继承自View,作为一个自定义控件:在清单文件中将这个自定义控件写出来,直接填满父窗体. 2.在WaterWave类中,实现它的两参构造函数: package com.examp

Android Material适配为控件设置指定背景色和点击波纹效果

Android Material适配为控件设置指定背景色和点击波纹效果,有需要的朋友可以参考下. 大部分时候,我们都需要为控件设置指定背景色和点击效果 4.x以下可以使用selector,5.0以上需要带波纹效果,以下是实现该效果的方法. 比如实现Button的Material适配 <Button android:text="TextView in CardView" android:layout_gravity="center" android:textS

自定义view实现水波纹效果

水波纹效果: 1.标准正余弦水波纹: 2.非标准圆形液柱水波纹: 虽说都是水波纹,但两者在实现上差异是比较大的,一个通过正余弦函数模拟水波纹效果,另外一个会运用到图像的混合模式(PorterDuffXfermode): 先看效果: 自定义View根据实际情况可以选择继承自View.TextView.ImageView或其他这次的实现我们都选择继承view,在实现的过程中我们需要关注如下几个方法: 1.onMeasure():最先回调,用于控件的测量; 2.onSizeChanged():在on

一个基于WebGL的仿真3D水池有逼真的水波纹效果

最近在研究WebGL,看到国外很多高手做的很多超炫的3D效果,无比羡慕.忍不住把效果趴下来研究,下面介绍一个逼真的游泳池中浮动小球的效果.效果非常绚丽,功能强大.示例可切换观察水池的视角,不同视角考虑到了光线从不同角度折射和反射的影响,所以波纹效果极其逼真. 先介绍下WebGL WebGL是一种3D绘图标准,这种绘图技术标准允许把JavaScript和OpenGL ES 2.0结合在一起,通过增加OpenGL ES 2.0的一个JavaScript绑定,WebGL可以为HTML5 Canvas提

Android 颜色渲染(七) RadialGradient 环形渲染实现水波纹效果

利用环形渲染我们可以做到什么? 其实很多都是非常常见的,比如上一篇实现的帮帮糖效果, 彩色的热气球,比如这里要讲到的水波纹效果,或者也可以理解为扩散色渲染效果首先看一下效果图: 轻触屏幕,即可看到对应的效果,可以看到,实现这种效果,利用RadialGradient ,只需简单几行代码: MainActivity: package com.tony.testshader; import android.os.Bundle; import android.app.Activity; import

聊聊Android5.0中的水波纹效果

水波纹效果已经不是什么稀罕的东西了,用过5.0新控件的小伙伴都知道这个效果,可是如果使用一个TextView或者Button或者其它普通控件的话,你是否知道如何给它设置水波纹效果呢?OK,我们今天就来看看这个水波纹效果的实现.水波纹效果的实现有系统自带属性可以实现,我们也可以自定义实现效果. 1.系统自带水波纹实现方式有界水波纹水波纹效果大致上可以分为两种,一种是有界的,一种无界,我们先来看看有界水波纹效果: 效果: 代码: <TextView android:layout_width=&quo

Node.js流

什么是流? 流是可以从一个源读取或写入数据到连续的目标对象.在Node.js,有四种类型的数据流. Readable - 其是用于读操作. Writable - 用在写操作. Duplex - 其可以用于读取和写入操作. Transform - 输出基于输入的地方进行计算的一种双相流. 每种类型的流是一个EventEmitter实例,并抛出的时代不同的实例几个事件.例如,一些常用的事件是: data - 当有数据可读取此事件. end - 当没有更多的数据读取此事件被触发. error - 当有

android 点击水波纹效果

这里是重点,<ripple>是API21才有的新Tag,正是实现水波纹效果的; 其中<ripple android:color="#FF21272B" .... />这个是指定水波纹的颜色. 而<item />里面的东西,我们都很熟悉,就是普通的定义一个带圆角的背景. ripple_bg.xml: <?xml version="1.0" encoding="utf-8"?> <ripple x

Android 自定义view实现水波纹效果

http://blog.csdn.net/tianjian4592/article/details/44222565 在实际的开发中,很多时候还会遇到相对比较复杂的需求,比如产品妹纸或UI妹纸在哪看了个让人兴奋的效果,兴致高昂的来找你,看了之后目的很明确,当然就是希望你能给她: 在这样的关键时候,身子板就一定得硬了,可千万别说不行,爷们儿怎么能说不行呢: 好了,为了让大家都能给妹纸们想要的,后面会逐渐分享一些比较比较不错的效果,目的只有一个,通过自定义view实现我们所能实现的动效: 今天主要分

ios点击产生波纹效果

ios点击产生波纹效果 by 伍雪颖 - (void)viewDidLoad { [super viewDidLoad]; RippleView = [[UIView alloc] initWithFrame:(CGRect){0,0,300,300}]; RippleView.backgroundColor = [[UIColor blackColor] colorWithAlphaComponent:0.3]; RippleView.layer.cornerRadius = 150; Rip

tree.js 流波纹效果

热门专题