点击手机屏幕,出现水波效果

css部分

.shui{
        width:10px;
        height:10px;
        background: red;
        border-radius: 50%;
        position:absolute;
        -webkit-animation: waveCircle 1.5s infinite;
        animation: waveCircle 1.5s infinite ;
      }
      @keyframes waveCircle {
        0% {
          transform:scale(2,2);
          opacity: 0.5;
       }
       100% {
          transform:scale(20,20);
          opacity: 0;
       }
     }
     @-webkit-keyframes waveCircle {
        0% {
          transform:scale(2,2);
          opacity: 0.5;
       }
       100% {
          transform:scale(20,20);
          opacity: 0;
       }
    }
    @-o-keyframes waveCircle /* Opera */
    {
      0% {
        transform:scale(2,2);
        opacity: 0.5;
     }
     100% {
        transform:scale(20,20);
        opacity: 0;
     }
    }
    @-moz-keyframes waveCircle /* Firefox */
    {
      0% {
        transform:scale(2,2);
        opacity: 0.5;
     }
     100% {
        transform:scale(20,20);
        opacity: 0;
     }
    }

js部分

$('body').on('touchstart',function(e) {
  var _touch = e.originalEvent.targetTouches[0];
  var _x= _touch.pageX+5;
    var _y= _touch.pageY+5;
    var rippleDiv = $('<div class="shui"></div>');
    rippleDiv.css({
      left:_x,
      top:_y,
      background: "#f896c9"
    }).appendTo($(".video"));
    window.setTimeout(function () {
      rippleDiv.remove();
    }, 1500)
});
实现滑动屏幕水波效果可以按照以下步骤进行: 1. 创建一个 Plane,将其缩放为适当大小,以适应屏幕大小。 2. 创建一个材质,并将其 Shader 设置为“Mobile/Diffuse”。 3. 将材质的纹理贴图设置为水波图。 4. 在 Plane 上添加一个脚本,用于控制水波的运动。 5. 使用 Touch 事件监听屏幕滑动事件。 6. 根据滑动方向和幅度计算出水波的速度和振幅。 7. 将速度和振幅传递给 Shader,控制水波的运动。 以下是一个示例脚本,用于实现滑动屏幕水波效果: ```csharp using UnityEngine; using System.Collections; public class WaterController : MonoBehaviour { public float speed = 1.0f; public float amplitude = 0.1f; private Material mat; void Start () { mat = GetComponent<Renderer>().material; } void Update () { if (Input.touchCount > 0 && Input.GetTouch(0).phase == TouchPhase.Moved) { Vector2 deltaPos = Input.GetTouch(0).deltaPosition; Vector2 direction = deltaPos.normalized; float distance = deltaPos.magnitude; float velocity = distance * speed; float wave = Mathf.Sin(Time.time * velocity) * amplitude; mat.SetVector("_Direction", new Vector4(direction.x, direction.y, 0, 0)); mat.SetFloat("_Wave", wave); } } } ``` 在 Shader 中,可以使用以下代码来实现水波效果: ```csharp Shader "Custom/Water" { Properties { _MainTex ("Texture", 2D) = "white" {} _Direction ("Direction", Vector) = (1, 0, 0, 0) _Wave ("Wave", Range(0, 1)) = 0 } SubShader { Pass { Tags { "RenderType"="Opaque" } CGPROGRAM #pragma vertex vert #pragma fragment frag #include "UnityCG.cginc" struct appdata { float4 vertex : POSITION; float2 uv : TEXCOORD0; }; struct v2f { float2 uv : TEXCOORD0; float4 vertex : SV_POSITION; }; sampler2D _MainTex; float4 _MainTex_ST; float4 _Direction; float _Wave; v2f vert (appdata v) { v2f o; o.vertex = UnityObjectToClipPos(v.vertex); o.uv = TRANSFORM_TEX(v.uv, _MainTex); return o; } fixed4 frag (v2f i) : SV_Target { float2 p = i.uv - 0.5; float distance = length(p) * 2; float2 direction = normalize(_Direction.xy); float dotProduct = dot(p, direction); float wave = sin(dotProduct * distance * _Wave); return tex2D(_MainTex, i.uv + wave * direction * _Wave); } ENDCG } } FallBack "Diffuse" } ``` 在 Shader 中,使用 _Direction 和 _Wave 控制水波的运动。_Direction 表示水波的运动方向,_Wave 表示水波的振幅。在 frag 函数中,使用 sin 函数根据 _Direction 和 _Wave 计算出水波的波动,最后使用 tex2D 函数获取纹理贴图的颜色并返回。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值