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

问题是我的网站上的徽标设置为在屏幕宽度达到特定点时开始按比例缩小。它设置为最大宽度,但也设置为缩放为其父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" alt="Smiley face" width="282" height="283">
<span id="flip0" class="coin" style="display:inline-block;"></span>
<img class="blackdrop" src="http://portalpacific.net/jsfid/bg2.png" alt="Smiley face" width="192" height="192">
<canvas id="myCanvas" width="200" height="200"></canvas>
</div>


这也是JSFiddle

谢谢你的帮助!

最佳答案

我对您的CSS进行了一些调整,以尽可能利用百分比,只需用此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%;
}

关于javascript - 如何使我的徽标JS动画比例像网站上的图像徽标一样?,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/42424862/

10-12 00:17
查看更多