利用样式表style实现会转动的按钮动画

关注

原创最新推荐文章于 2026-06-20 11:18:09 发布 1.5k 阅读 AI 写同款· GEO 优化 ›

Qt QStackedWidget平滑切换动画实现：淡入淡出与滑动效果详解在桌面应用开发中，界面切换的流畅性是提升用户体验的关键因素。通过动画技术实现平滑过渡，能够有效降低用户在不同任务间切换时的认知负荷，增强应用的视觉连贯性和专业度。其核心原理是利用属性插值动画，在页面切换过程中动态改变控件的位置、透明度等视觉属性，从而创造出自然的过渡效果。在Qt框架中，QPropertyAnimation类为实现这类动画提供了强大支持，它可以对任何Q_PROPERTY进行插值计算。结合QStackedWidget进行页面管理，开发者能够为多页面应用添加丰富的切换效果，如淡入淡出、水平滑动等。阅读详情

说明：参考javacsript权威指南（第四版），书中没有具体例子，而且在IE不能实现。

我修改了一下，在style属性中加了position:absolute, 因为书中要传入函数，所以写成：position:function(f,t) {return 'absolute';}

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">
<SCRIPT LANGUAGE="JavaScript">
<!--
/**
* AnimateCSS.js:
* This file defines a function named animateCSS(), which serves as a framework
* for creating CSS-based animations. The arguments to this function are:
*
*     element: 要产生动画的HTML元素
*     numFrames: 动画中的总帧数
*     timePerFrame: 显示每帧的毫秒数
*     animation: 定义动画的对象，后面有它的说明
*     whendone: 一个可选的函数，在动画结束时调用
*               如果设置了该函数，它的参数是element
*
* The animateCSS() function simply defines an animation framework. It is the
* properties of the animation object that specify the animation to be
* done. Each property should have the same name as a CSS style property. The
* value of each property must be a function that returns values for that
* style property. Each function is passed the frame number and the total
* amount of elapsed time, and it can use these to compute the style value it
* should return for that frame. For example, to animate an image so that it
* slides in from the upperleft, you might invoke animateCSS as follows:
*
* animateCSS(image, 25, 50, // Animate image for 25 frames of 50ms each
*             { // Set top and left attributes for each frame as follows
*               top: function(frame,time) { return frame*8 + "px"; },
*               left: function(frame,time) { return frame*8 + "px"; }
*             });
*
**/
function animateCSS(element, numFrames, timePerFrame, animation, whendone) {
    var frame = 0;   // 存储当前帧号
    var time = 0;    // 存储消耗的总时间

    // Arrange to call displayNextFrame() every timePerFrame milliseconds.
    // This will display each of the frames of the animation.
    var intervalId = setInterval(displayNextFrame, timePerFrame);

    // The call to animateCSS() returns now, but the line above ensures that
    // the nested function defined below will be invoked once for each frame
    // of the animation. Because this function is defined inside
    // animateCSS(), it has access to the arguments and local variables of
    // animateCSS() even though it is invoked after that function has returned!
    function displayNextFrame() {
        if (frame >= numFrames) {             // First, see if we're done
            clearInterval(intervalId);        // If so, stop calling ourselves
            if (whendone) whendone(element); // Invoke whendone function
            return;                           // And we're finished
        }

        // Now loop through all properties defined in the animation object
        for(var cssprop in animation) {
            // For each property, call its animation function, passing the
            // frame number and the elapsed time. Use the return value of the
            // function as the new value of the corresponding style property
            // of the specified element. Use try/catch to ignore any
            // exceptions caused by bad return values.
            try {
                element.style[cssprop] = animation[cssprop](frame, time);
            } catch(e) {}
        }

        frame++;               // Increment the frame number
        time += timePerFrame; // Increment the elapsed time
    }
}

//-->
</SCRIPT>
</HEAD>

<BODY>