如何使我的徽标 JS 动画像网站上的图像徽标一样缩放？

Posted 2023-03-05

技术标签:

【中文标题】如何使我的徽标 JS 动画像网站上的图像徽标一样缩放？【英文标题】：How to make my logo JS animation scale like image logo on website? 【发布时间】：2017-07-14 11:20:04 【问题描述】：

我花了很多时间在我的网站上创建了这个非常酷的徽标动画！我制作的徽标动画与徽标图像大小相同，我可以轻松地将其应用到网站上。

问题是我网站上的徽标设置为在屏幕宽度达到某个点后开始缩小。它设置了最大宽度，但也设置为缩放到其父 div 的大小。我的动画不这样做......我意识到在将我的徽标动画应用到我的网站之前我需要弄清楚这一点。因为它的行为方式不同......而且我真的不想使用 css 缩放和媒体查询，因为那会一团糟。

这是我的动画。

// Create an array to store our particles
var particles = [];

// The amount of particles to render
var particleCount = 10;

// The maximum velocity in each direction
var maxVelocity = 3;

// The target frames per second (how often do we want to update / redraw the scene)
var targetFPS = 33;

// Set the dimensions of the canvas as variables so they can be used.
var canvasWidth = 400;
var canvasHeight = 400;

// Create an image object (only need one instance)
var imageObj = new Image();

// Once the image has been downloaded then set the image on all of the particles
imageObj.onload = function() 
    particles.forEach(function(particle) 
            particle.setImage(imageObj);
    );
;

// Once the callback is arranged then set the source of the image
imageObj.src = "http://www.freeiconspng.com/uploads/misc-cloud-smoke-element-png-by-dbszabo1-on-deviantart-19.png";

// A function to create a particle object.
function Particle(context) 

    // Set the initial x and y positions
    this.x = 0;
    this.y = 0;

    // Set the initial velocity
    this.xVelocity = 0;
    this.yVelocity = 0;

    // Set the radius
    this.radius = 5;

    // Store the context which will be used to draw the particle
    this.context = context;

    // The function to draw the particle on the canvas.
    this.draw = function() 
        
        // If an image is set draw it
        if(this.image)
            this.context.drawImage(this.image, this.x-228, this.y-228);         
            // If the image is being rendered do not draw the circle so break out of the draw function                
            return;
        
        // Draw the circle as before, with the addition of using the position and the radius from this object.
    ;

    // Update the particle.
    this.update = function() 
        // Update the position of the particle with the addition of the velocity.
        this.x += this.xVelocity;
        this.y += this.yVelocity;

        // Check if has crossed the right edge
        if (this.x >= canvasWidth) 
            this.xVelocity = -this.xVelocity;
            this.x = canvasWidth;
        
        // Check if has crossed the left edge
        else if (this.x <= 0) 
            this.xVelocity = -this.xVelocity;
            this.x = 0;
        

        // Check if has crossed the bottom edge
        if (this.y >= canvasHeight) 
            this.yVelocity = -this.yVelocity;
            this.y = canvasHeight;
        
        
        // Check if has crossed the top edge
        else if (this.y <= 0) 
            this.yVelocity = -this.yVelocity;
            this.y = 0;
        
    ;

    // A function to set the position of the particle.
    this.setPosition = function(x, y) 
        this.x = x;
        this.y = y;
    ;

    // Function to set the velocity.
    this.setVelocity = function(x, y) 
        this.xVelocity = x;
        this.yVelocity = y;
    ;
    
    this.setImage = function(image)
        this.image = image;
    


// A function to generate a random number between 2 values
function generateRandom(min, max)
    return Math.random() * (max - min) + min;


// The canvas context if it is defined.
var context;

// Initialise the scene and set the context if possible
function init() 
    var canvas = document.getElementById('myCanvas');
    if (canvas.getContext) 

        // Set the context variable so it can be re-used
        context = canvas.getContext('2d');

        // Create the particles and set their initial positions and velocities
        for(var i=0; i < particleCount; ++i)
            var particle = new Particle(context);
            
            // Set the position to be inside the canvas bounds
            particle.setPosition(generateRandom(0, canvasWidth), generateRandom(0, canvasHeight));
            
            // Set the initial velocity to be either random and either negative or positive
            particle.setVelocity(generateRandom(-maxVelocity, maxVelocity), generateRandom(-maxVelocity, maxVelocity));
            particles.push(particle);            
        
    
    else 
        alert("Please use a modern browser");
    


// The function to draw the scene
function draw() 
    // Clear the drawing surface and fill it with a black background
    //context.fillStyle = "rgba(0, 0, 0, 0.5)";
    //context.fillRect(0, 0, 400, 400);
    context.clearRect(0,0,1014,611);
    // Go through all of the particles and draw them.
    particles.forEach(function(particle) 
        particle.draw();
    );


// Update the scene
function update() 
    particles.forEach(function(particle) 
        particle.update();
    );


// Initialize the scene
init();

// If the context is set then we can draw the scene (if not then the browser does not support canvas)
if (context) 
    setInterval(function() 
        // Update the scene befoe drawing
        update();

        // Draw the scene
        draw();
    , 1000 / targetFPS);




var deg = [0, 0, 0, 0];

rotate = function() 
  for (var i = 0; i < 3; ++i) 
    deg[i] += 180 * 3;
    if (Math.random() > 8)
      deg[i] += 180;
    $('#flip' + i).css(
      '-webkit-transform': 'rotateY(' + deg[i] + 'deg)',
      '-o-transform': 'rotateY(' + deg[i] + 'deg)',
      'transform': 'rotateY(' + deg[i] + 'deg)'
    );
  
;

rotate();
setInterval(rotate, 8000);

.animateVSS
  width:282px;
  height:283px;
  position:relative;
  margin-top:20px;
  margin-left:100px;

.vsslogocover
  position:absolute;
  z-index:2;


.blackdrop
  position:relative;
  top:-189px;
  margin-left:44px;
  opacity:0;


#myCanvas
  position:relative;
    background:black;
    position:absolute;
    z-index;4;
    margin-top:-190px;
    margin-left:-190px;
    border-radius:100%;


.coin 
  background-image: url("http://portalpacific.net/jsfid/vss-animated-front-logo1.png");
  background-size: 100% 100%;
  border-radius: 100%;
  height: 182px;
  position: relative;
  width:185px;
  -webkit-transition: 1.8s ease-in-out;
  -o-transition: 1.8s ease-in-out;
  transition: 1.8s ease-in-out;
  -webkit-transform-style: preserve-3d;
  -o-transform-style: preserve-3d;
  transform-style: preserve-3d;
  margin-top:50px;
  margin-left:48px;
  z-index:1;
  background-color: black;


.coin:before 
  background-color: black;
  background-image: url("http://portalpacific.net/jsfid/vss22-animated-back-logo-185x1821.png");
  background-size: 100% 100%;
  content: '';
  height: 182px;
  left: 0;
  position: absolute;
  top: 0;
  width: 185px;
  margin-top:1px;
  -webkit-transform: translateZ(-5px);
  -o-transform: translateZ(-5px);
  transform: translateZ(-5px);
  border-radius:100%;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<div class="animateVSS">
<img class="vsslogocover" src="http://portalpacific.net/jsfid/VSS%20Bazooka%20Logo%20animation%20cover%20logo%20border.png"   >
<span id="flip0" class="coin" style="display:inline-block;"></span>
<img class="blackdrop" src="http://portalpacific.net/jsfid/bg2.png"   >
<canvas id="myCanvas"  ></canvas>
</div>

这里还有一个JSFiddle。

感谢您的帮助！

【问题讨论】：

css 动画不是一个选项吗？ :// 【参考方案1】：

您正在设置明确的宽度并使用明确的像素值和坐标。这会让事情变得棘手。尝试将所有坐标作为宽度的百分比，然后您可以动态检测宽度（或将其设置在类之外）并且一切都应该缩放。这不是一个快速修复，但也不是很复杂。

【讨论】：

如果我将所有图像设置为具有百分比宽度并为它们提供像素的最大宽度，它会解决问题吗？有没有办法根据视口大小使用 jquery 使用百分比来缩放它？您可以查看基本单位，如 vh、vw 等。但请查看 BenGrahams 答案。【参考方案2】：

我稍微调整了你的 CSS 以尽可能使用百分比，只需用这个替换你的 CSS，你就会看到你的徽标现在是响应式的。您可以根据自己的喜好调整百分比以使其更宽或更小：

rotate();
setInterval(rotate, 8000);

#myCanvas
  position:relative;
    background:black;
    position:absolute;
    z-index;4;
    margin-top:-190px;
    margin-left:-190px;
    border-radius:100%;


    .animateVSS 
    position: relative;
    width: 20%;
    max-width: 282px;
    max-height: 283px;
    padding-top: 20%;
    display: inline-block;

    .vsslogocover 
    position: absolute;
    z-index: 2;
    width: 100%;
    height: auto;
    max-width: 282px;
    max-height: 283px;
    top: 0;

    .coin 
    height: 70%;
    max-height: 182px;
    width: 66%;
    max-width: 185px;
    margin-top: 16%;
    margin-left: 17%;
    top: 0;
    position: absolute;
    background-image: url(http://portalpacific.net/jsfid/vss-animated-front-logo1.png);
    background-size: 100% 100%;
    border-radius: 100%;
    -o-transition: 1.8s ease-in-out;
    transition: 1.8s ease-in-out;
    -webkit-transform-style: preserve-3d;
    -o-transform-style: preserve-3d;
    transform-style: preserve-3d;
    z-index: 1;
    background-color: black;

    .coin:before 
    background-color: black;
    background-image: url(http://portalpacific.net/jsfid/vss22-animated-back-logo-185x1821.png);
    background-size: 100% 100%;
    content: '';
    left: 0;
    position: absolute;
    margin-top: 1px;
    -webkit-transform: translateZ(-5px);
    -o-transform: translateZ(-5px);
    transform: translateZ(-5px);
    border-radius: 100%;
    height: 100%;
    max-height: 182px;
    width: 100%;
    max-width: 185px;
    top: 0;

    .blackdrop 
    position: absolute;
    opacity: 0;
    width: 100%;
    height: auto;
    max-width: 282px;
    max-height: 283px;
    top: 0;

    #myCanvas 
    background: black;
    position: absolute;
    margin-left: 17%;
    border-radius: 100%;
    top: 0;
    width: 70%;
    max-width: 200px;
    max-height: 200px;
    height: auto;
    margin-top: 17%;

【讨论】：

我不得不经常使用您的百分比来使它们正确，但这是我们的解决方案。非常感谢！【参考方案3】：

这里不完全是专家，但我试图弄乱你的代码。据我所知，代码中的所有 css 参数都是固定像素，这使得元素无法响应屏幕大小。

您必须使父 div 固定像素（如果您愿意，也可以响应），然后将所有子元素设置为响应父元素。这可以是父级宽度的 100%。

因此当屏幕尺寸缩小时，您不必担心元素会被打乱。它们都会被封装在父 div 中。

这并不完全是您需要的完美代码，但它会让您对这里发生的事情有一个很好的了解。

CSS

.animateVSS
  position:relative;
  width:100px;
  height:100px;

.vsslogocover
  position:absolute;
  z-index:2;
  width:100%;


.blackdrop
  position:absolute;
  width:100%;


#myCanvas
    background:black;
    position:absolute;
    z-index;4;
    width:100%;
    height:100%;
    border-radius:50%;


.coin 
  background-image: url("http://portalpacific.net/jsfid/vss-animated-front-logo1.png");
  background-size:contain;
  border-radius: 50%;
  position: absolute;
  width:100%;
  -webkit-transition: 1.8s ease-in-out;
  -o-transition: 1.8s ease-in-out;
  transition: 1.8s ease-in-out;
  -webkit-transform-style: preserve-3d;
  -o-transform-style: preserve-3d;
  transform-style: preserve-3d;
  z-index:1;
  background-color: black;


.coin:before 
  background-color: black;
  background-image: url("http://portalpacific.net/jsfid/vss22-animated-    back-logo-185x1821.png");
  background-size: contain;
  content: '';
  height: 70px;
  left: 0;
  position: absolute;
  top: 0;
  width: 70px;
  margin-top:15px;
  margin-left:15px;
  border-radius:100%;

html

<div class="animateVSS">
<img class="vsslogocover" src="http://portalpacific.net/jsfid/VSS%20Bazooka%20Logo%20animation%20cover%20logo%20border.png" >
<span id="flip0" class="coin" style="display:inline-block;"></span>
<img class="blackdrop" src="http://portalpacific.net/jsfid/bg2.png" >
<canvas id="myCanvas"></canvas>
</div>

【讨论】：

【参考方案4】：

代码已更新。它使用画布效果，它是响应式的，并且也使用 css3 动画。我试图让动画在动画的开始和结束时同时显示硬币的正面和背面:) 干杯！

https://jsfiddle.net/BenjaminGraham/rudngfq9/

// Create an array to store our particles
var particles = [];

// The amount of particles to render
var particleCount = 10;

// The maximum velocity in each direction
var maxVelocity = 3;

// The target frames per second (how often do we want to update / redraw the scene)
var targetFPS = 33;

// Set the dimensions of the canvas as variables so they can be used.
var canvasWidth = 400;
var canvasHeight = 400;

// Create an image object (only need one instance)
var imageObj = new Image();

// Once the image has been downloaded then set the image on all of the particles
imageObj.onload = function() 
    particles.forEach(function(particle) 
            particle.setImage(imageObj);
    );
;

// Once the callback is arranged then set the source of the image
imageObj.src = "http://www.freeiconspng.com/uploads/misc-cloud-smoke-element-png-by-dbszabo1-on-deviantart-19.png";

// A function to create a particle object.
function Particle(context) 

    // Set the initial x and y positions
    this.x = 0;
    this.y = 0;

    // Set the initial velocity
    this.xVelocity = 0;
    this.yVelocity = 0;

    // Set the radius
    this.radius = 5;

    // Store the context which will be used to draw the particle
    this.context = context;

    // The function to draw the particle on the canvas.
    this.draw = function() 
        
        // If an image is set draw it
        if(this.image)
            this.context.drawImage(this.image, this.x-228, this.y-228);         
            // If the image is being rendered do not draw the circle so break out of the draw function                
            return;
        
        // Draw the circle as before, with the addition of using the position and the radius from this object.
    ;

    // Update the particle.
    this.update = function() 
        // Update the position of the particle with the addition of the velocity.
        this.x += this.xVelocity;
        this.y += this.yVelocity;

        // Check if has crossed the right edge
        if (this.x >= canvasWidth) 
            this.xVelocity = -this.xVelocity;
            this.x = canvasWidth;
        
        // Check if has crossed the left edge
        else if (this.x <= 0) 
            this.xVelocity = -this.xVelocity;
            this.x = 0;
        

        // Check if has crossed the bottom edge
        if (this.y >= canvasHeight) 
            this.yVelocity = -this.yVelocity;
            this.y = canvasHeight;
        
        
        // Check if has crossed the top edge
        else if (this.y <= 0) 
            this.yVelocity = -this.yVelocity;
            this.y = 0;
        
    ;

    // A function to set the position of the particle.
    this.setPosition = function(x, y) 
        this.x = x;
        this.y = y;
    ;

    // Function to set the velocity.
    this.setVelocity = function(x, y) 
        this.xVelocity = x;
        this.yVelocity = y;
    ;
    
    this.setImage = function(image)
        this.image = image;
    


// A function to generate a random number between 2 values
function generateRandom(min, max)
    return Math.random() * (max - min) + min;


// The canvas context if it is defined.
var context;

// Initialise the scene and set the context if possible
function init() 
    var canvas = document.getElementById('myCanvas');
    if (canvas.getContext) 

        // Set the context variable so it can be re-used
        context = canvas.getContext('2d');

        // Create the particles and set their initial positions and velocities
        for(var i=0; i < particleCount; ++i)
            var particle = new Particle(context);
            
            // Set the position to be inside the canvas bounds
            particle.setPosition(generateRandom(0, canvasWidth), generateRandom(0, canvasHeight));
            
            // Set the initial velocity to be either random and either negative or positive
            particle.setVelocity(generateRandom(-maxVelocity, maxVelocity), generateRandom(-maxVelocity, maxVelocity));
            particles.push(particle);            
        
    
    else 
        alert("Please use a modern browser");
    


// The function to draw the scene
function draw() 
    // Clear the drawing surface and fill it with a black background
    //context.fillStyle = "rgba(0, 0, 0, 0.5)";
    //context.fillRect(0, 0, 400, 400);
    context.clearRect(0,0,1014,611);
    // Go through all of the particles and draw them.
    particles.forEach(function(particle) 
        particle.draw();
    );


// Update the scene
function update() 
    particles.forEach(function(particle) 
        particle.update();
    );


// Initialize the scene
init();

// If the context is set then we can draw the scene (if not then the browser does not support canvas)
if (context) 
    setInterval(function() 
        // Update the scene befoe drawing
        update();

        // Draw the scene
        draw();
    , 1000 / targetFPS);




var deg = [0, 0, 0, 0];

rotate = function() 
  for (var i = 0; i < 3; ++i) 
    deg[i] += 180 * 3;
    if (Math.random() > 8)
      deg[i] += 180;
    $('#flip' + i).css(
      '-webkit-transform': 'rotateY(' + deg[i] + 'deg)',
      '-o-transform': 'rotateY(' + deg[i] + 'deg)',
      'transform': 'rotateY(' + deg[i] + 'deg)'
    );
  
;

rotate();
setInterval(rotate, 8000);

.animateVSS 
  width: 282px;
  height: 283px;
  position: relative;


.vsslogocover 
  position: absolute;
  z-index: 2;


.blackdrop 
  position: relative;
  opacity: 0;


#myCanvas 
  position: absolute;
  background: black;
  z-index;
  4;
  top: 17.5%;
  left: 17.5%;
  bottom: 0;
  border-radius: 100%;


.coin 
  background-image: url("http://portalpacific.net/jsfid/vss-animated-front-logo1.png");
  background-size: 100% 100%;
  border-radius: 100%;
  height: 65%;
  width: 65%;
  top: 17.5%;
  left: 17.5%;
  position: relative;
  -webkit-transition: 1.8s ease-in-out;
  -o-transition: 1.8s ease-in-out;
  transition: 1.8s ease-in-out;
  -webkit-transform-style: preserve-3d;
  -o-transform-style: preserve-3d;
  transform-style: preserve-3d;
  z-index: 1;
  background-color: black;


.coin:before 
  background-color: black;
  background-image: url("http://portalpacific.net/jsfid/vss22-animated-back-logo-185x1821.png");
  background-size: 100% 100%;
  content: '';
  height: 100%;
  width: 100%;
  left: 0%;
  position: absolute;
  top: 0%;
  -webkit-transform: translateZ(-5px);
  -o-transform: translateZ(-5px);
  transform: translateZ(-5px);
  border-radius: 100%;


#flip0 
  -webkit-animation-name: Logo;
  animation-name: Logo;
  -webkit-animation-duration: 5s;
  animation-duration: 5s;
  -webkit-animation-iteration-count: infinite;
  /* Safari 4.0 - 8.0 */
  animation-iteration-count: infinite;


@keyframes Logo 
  0% 
    transform: rotateY(0deg);
    -webkit-transform: rotateY(0deg);
    
  25% 
    transform: rotateY(0deg);
    -webkit-transform: rotateY(0deg);
  
  50% 
    transform: rotateY(900deg);
    -webkit-transform: rotateY(900deg);
    
    75% 
    transform: rotateY(900deg);
    -webkit-transform: rotateY(900deg);
  
  100% 
    transform: rotateY(0deg);
    -webkit-transform: rotateY(0deg);
  


@media screen and (max-width:767px) 
  .animateVSS 
    width: 180px;
    height: 180px;
  


@media screen and (min-width:768px) 
  .animateVSS 
    width: 280px;
    height: 280px;
  
  #myCanvas 
    width: 180px;
    height: 180px;
    top: 17.5%;
    left: 17.5%;

<div class="animateVSS">
  <img class="vsslogocover" src="http://portalpacific.net/jsfid/VSS%20Bazooka%20Logo%20animation%20cover%20logo%20border.png"   >
  <span id="flip0" class="coin" style="display:inline-block;">
  </span>
  <img class="blackdrop" src="http://portalpacific.net/jsfid/bg2.png"   >
  <canvas id="myCanvas"  ></canvas>
</div>

【讨论】：

干得好，点赞。但他已经表示对 CSS 和媒体查询不感兴趣。无论如何，干杯！ ;-) 感谢贝赫拉德！但是有一些做事的方法......我可以理解他所做的一些事情（JS）以及为什么......但是当你想要跨屏幕尺寸缩放时，那就是当我们使用 css 媒体查询时，它是使用适当的技术......这就是它的用途！这不是一团糟，它相对容易并且具有实际意义。我经常看到（在这里）问题或背后的思考问题，而不一定是所提供的答案或建议。干杯并感谢您的支持！我同意你的观点并尊重他的需求。您已经在 SO 中正确检测到 XY Problem。我发消息只是为了表达我多么喜欢你的代码。不客气，伙计。它很酷！虽然我确实需要画布作为主要效果，但动画翻转时您在徽标内看到的动画烟雾。此外，此动画与我创建的动画不同，它只是向后转回火箭筒图像。我已经更新了多次旋转的代码（只需更改 css 的 Y 度，我还添加了画布。它也是响应式的。干杯！

以上是关于如何使我的徽标 JS 动画像网站上的图像徽标一样缩放？的主要内容，如果未能解决你的问题，请参考以下文章

我如何告诉 Reddit 忽略我的缩略图徽标？

在动画中使用蓝牙徽标

滚动脚本上的动画更改徽标大小会导致库冲突或其他一些加载问题

如何动画调整滚动上较小的徽标图像？

响应式缩放由多个重叠的不同大小图像组成的 css 动画徽标