matrix 实现动画3D旋转效果

首先看下效果:大概效果就是这样 如果是你需要的 就继续往下看 如果是简单实现一个那就容易了 那也不需要用到matrix代码如下:AnimatorSet animatorSetCionOne=new AnimatorSet();ObjectAnimator objectAnimatorCionOneRotation=ObjectAnimator.ofFloat(mImage
摘要由CSDN通过智能技术生成

首先看下效果:

大概效果就是这样 如果是你需要的 就继续往下看 

如果是简单实现一个那就容易了 那也不需要用到matrix

代码如下:

AnimatorSet animatorSetCionOne=new AnimatorSet();
ObjectAnimator objectAnimatorCionOneRotation=ObjectAnimator.ofFloat(mImageViewCionOne,"rotation",250f,-30f,0f).setDuration(mLongLongDurationTime);
ObjectAnimator objectAnimatorCionOneRotationX=ObjectAnimator.ofFloat(mImageViewCionOne,"rotationX",-200f,0f,180,0f).setDuration(mLongLongDurationTime);
ObjectAnimator objectAnimatorCionOneRotationY=ObjectAnimator.ofFloat(mImageViewCionOne,"rotationY",169f,-60f,0f).setDuration(mLongLongDurationTime);
ObjectAnimator objectAnimatorCionOneTranslationY=ObjectAnimator.ofFloat(mImageViewCionOne,"translationY",150f,0f).setDuration(mLongLongDurationTime);
ObjectAnimator objectAnimatorCionOneTranslationX=ObjectAnimator.ofFloat(mImageViewCionOne,"translationX",200f,0f).setDuration(mLongLongDurationTime);
ObjectAnimator objectAnimatorCionOneScaleX= ObjectAnimator.ofFloat(mImageViewCionOne,"scaleX",0,1f).setDuration(mLongLongDurationTime);
ObjectAnimator objectAnimatorCionOneScaleY= ObjectAnimator.ofFloat(mImageViewCionOne,"scaleY",0,1f).setDuration(mLongLongDurationTime);
ObjectAnimator objectAnimatorCionOneAlpha= ObjectAnimator.ofFloat(mImageViewCionOne,"alpha",0,1.0f).setDuration(mDurationTime);
animatorSetCionOne.setStartDelay(600);
animatorSetCionOne.playTogether(objectAnimatorCionOneTranslationY,objectAnimatorCionOneTranslationX,objectAnimatorCionOneScaleX,
        objectAnimatorCionOneRotation,objectAnimatorCionOneRotationX,objectAnimatorCionOneRotationY,objectAnimatorCionOneScaleY,objectAnimatorCionOneAlpha);

分别设置一下绕X轴,Y轴,Z轴 旋转旋转 再搞点位移,再搞点缩放 再搞点透明渐变就可以了 很炫酷了 


但是 如果像我这样 有十几个金币啥的 就比较烦了  代码写的老多了

所以 需求就是学习的动力 

下面就开始上代码了

import android.content.Context;
import android.content.res.TypedArray;
import android.graphics.Bitmap;
import android.graphics.BitmapFactory;
import android.graphics.Camera;
import android.graphics.Canvas;
i
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
实现3D旋转地球,需要使用HTML5中的canvas元素和JavaScript编写代码。以下是一个简单的示例: 1. HTML代码 首先,在HTML文件中添加一个canvas元素,设置宽高和id属性: ``` <canvas id="myCanvas" width="500" height="500"></canvas> ``` 2. JavaScript代码 接下来,使用JavaScript来绘制地球并实现旋转效果。首先,创建一个画布对象和一个Image对象: ``` var canvas = document.getElementById("myCanvas"); var ctx = canvas.getContext("2d"); var img = new Image(); img.src = "earth.jpg"; ``` 然后,使用drawImage()方法将地球图片绘制在画布上: ``` img.onload = function() { ctx.drawImage(img, 0, 0, canvas.width, canvas.height); } ``` 接着,在绘制地球之前,需要设置一些属性实现3D效果。这些属性包括: - 视角距离(distance):表示视角与画布的距离,值越小,地球看起来越大; - 光源方向(light):表示光源的方向,使用三维向量表示; - 旋转角度(angle):表示地球的旋转角度,由用户控制。 ``` var distance = canvas.width * 0.8; var light = {x: 0.5, y: 0.5, z: -0.5}; var angle = 0; ``` 接下来,编写一个函数来绘制地球并实现旋转效果: ``` function drawEarth() { // 清空画布 ctx.clearRect(0, 0, canvas.width, canvas.height); // 计算旋转角度 angle += 0.01; // 计算地球的中心点和半径 var centerX = canvas.width / 2; var centerY = canvas.height / 2; var radius = canvas.width * 0.4; // 计算地球的旋转矩阵 var rotateMatrix = [ [Math.cos(angle), 0, -Math.sin(angle)], [0, 1, 0], [Math.sin(angle), 0, Math.cos(angle)] ]; // 绘制地球 ctx.save(); ctx.translate(centerX, centerY); ctx.transform(rotateMatrix[0][0], rotateMatrix[0][1], rotateMatrix[0][2], rotateMatrix[1][0], rotateMatrix[1][1], rotateMatrix[1][2], rotateMatrix[2][0], rotateMatrix[2][1], rotateMatrix[2][2]); ctx.drawImage(img, -radius, -radius, radius * 2, radius * 2); ctx.restore(); // 绘制光源 ctx.save(); ctx.translate(centerX, centerY); var lightX = light.x * canvas.width; var lightY = light.y * canvas.height; var lightZ = light.z * distance; var lightRadius = 10; var lightGradient = ctx.createRadialGradient(lightX, lightY, lightRadius / 3, lightX, lightY, lightRadius); lightGradient.addColorStop(0, "white"); lightGradient.addColorStop(1, "rgba(255, 255, 255, 0)"); ctx.fillStyle = lightGradient; ctx.beginPath(); ctx.arc(lightX, lightY, lightRadius, 0, Math.PI * 2); ctx.fill(); ctx.restore(); // 绘制阴影 ctx.save(); ctx.translate(centerX, centerY); ctx.transform(rotateMatrix[0][0], rotateMatrix[0][1], rotateMatrix[0][2], rotateMatrix[1][0], rotateMatrix[1][1], rotateMatrix[1][2], rotateMatrix[2][0], rotateMatrix[2][1], rotateMatrix[2][2]); ctx.fillStyle = "rgba(0, 0, 0, 0.5)"; ctx.beginPath(); ctx.arc(0, 0, radius, 0, Math.PI * 2); ctx.fill(); ctx.restore(); // 递归调用自身,实现动画效果 requestAnimationFrame(drawEarth); } ``` 最后,在页面加载完成后,调用drawEarth()函数开始绘制地球: ``` window.onload = function() { drawEarth(); }; ``` 3. CSS样式 为了让canvas元素居中显示,可以添加以下CSS样式: ``` canvas { display: block; margin: 0 auto; } ``` 完整的HTML、CSS和JavaScript代码如下:

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值