Unix-Center.Net BBS

从透视效果应用到实现一个转动，（用动画的方式来表现一个程序中的转动），再发展成一个cover flow效果,方法简单，源代码有空发上来。原理是有时我们搬运物体，采用在手上传递的方法，人转身把东西传给旁边的人，然后脱手，再转回身体,从而人不走动，和东西在人的手里向前移动。倒影好象是一张张画面立在一个有很光洁的平面上，影子向下引伸，这可不是效果反射reflection,因为它是与水平线完全对称的，不适合用在立体感的图形中。必须向下引伸，倒影逐渐变虚。可见javafx功能非常之强大！代码简单。

[ 本帖最后由 zizhang 于 2010-2-3 16:55 编辑 ]

取两张图片，一张正面，另一张背面，通过鼠标的水平方向移动使图形翻转（绕y轴转动），看到它的背面,在手机方面有用武之地，同时可以更好理解转动。

package javafxapplication25;


import javafx.stage.Stage;
import javafx.scene.Scene;
import javafx.scene.image.Image;
import javafx.scene.input.MouseEvent;
import javafx.scene.paint.Color;
import javafx.scene.shape.Rectangle;
import javafx.scene.Group;
import javafx.scene.effect.PerspectiveTransform;
import javafx.scene.image.ImageView;
import javafx.scene.paint.LinearGradient;
import javafx.scene.paint.Stop;
import javafx.scene.CustomNode;
import javafx.scene.Node;
import javafx.scene.shape.Line;


var xoffset:Number = 25;
var yoffset:Number = 50;
var dw:Number = 0;
var dh:Number = 0;

var x0:Number;
var curDx:Number;
var preDx:Number = 0;

Stage {
    title: "reverse test"
    scene: Scene {
        width: 250
        height:500
        fill: Color.BLACK
        content: [
            Rectangle {
                x: xoffset, y: yoffset
                width: 200, height: 200
                fill: Color.BLACK

                onMousePressed: function (e: MouseEvent): Void {
                    x0 = e.x;
                }
                onMouseDragged: function (e: MouseEvent): Void {

                    curDx = preDx + e.x-x0;

                    if(curDx<=0) {
                        dw = 0;
                        dh = 0;
                    }
                    else if (curDx<=100) {
                        dh = 0.3*curDx;
                        dw = curDx;
                    }
                    else if (curDx<=200 ) {
                        dh = 0.3*(200-curDx);
                        dw = curDx;
                    }
                    else if (curDx>200) {
                        dw = 200;
                        dh = 0;
                    }
                }
                onMouseReleased: function (e: MouseEvent): Void {
                    preDx = curDx;
                }
            },
            Rectangle {
                x: xoffset, y: yoffset
                width: 200, height: 200
                fill: null
                stroke: Color.web("#888888")
                strokeWidth:2
            },
            Positioner {
                offsetX: xoffset
                offsetY: yoffset
                dw: bind dw
                dh: bind dh
                sx: bind if(dw<=100) 1 else -1
                image: bind if(dw<=100) Image { url: "{__DIR__}img3.jpg" }
                else Image { url: "{__DIR__}img13.jpg" }
            },
            Line {
                startX: 100 + xoffset, startY: yoffset-10
                endX: 100 + xoffset, endY: 400
                strokeWidth: 2
                stroke: Color.web("#880000")
            },
        ]
    }
}

class Positioner extends CustomNode {
    package var offsetX:Number;
    package var offsetY:Number;
    package var image:Image;
    package var dw:Number = 30;
    package var dh:Number = 20;
    package var sx:Number = 1;

    override function create():Node {
        Group {
            translateX: offsetX
            translateY: offsetY
            
            content:[
                Group {
                     effecterspectiveTransform {
                           ulx:bind dw
                           uly:bind -dh
                           urx:bind 200 - dw
                           ury:bind dh
                           lrx:bind 200 - dw
                           lry:bind 400 - 3*dh
                           llx:bind dw
                           lly:bind 400 + 3*dh
                    }
                    content: [
                        ImageView {
                            scaleX: bind sx
                            x:0 y:0
                            image: bind image
                        },
                        ImageView {
                            scaleX: bind sx
                            scaleY:-1.0
                            x:0 y:200
                            image: bind image
                        },
                        Rectangle {
                            x: 0, y: 200
                            width: 200, height: 200
                            fill:  LinearGradient {
                                startX : 0
                                startY : 0.0
                                endX : 0
                                endY : 1
                                stops: [
                                    Stop {
                                        color : Color.rgb(0, 0, 0, 0.6)
                                        offset: 0.0
                                    },
                                    Stop {
                                        color : Color.rgb(0, 0, 0, 0.87)
                                        offset: 0.4
                                    },
                                ]
                            }
                        }

                    ]
                }

            ]
        }
    }
}






[ 本帖最后由 zizhang 于 2010-3-2 11:40 编辑 ]

把天气预报作为载体，1是效果图，2是正在翻转时的正面图（今天的预报），3是正在翻转时的背面图（明天的预报），这是一个上面的具体应用.zip中是源程序。
如果有更快的电脑，或更快的编程语言效果更好。

结束！


[ 本帖最后由 zizhang 于 2010-3-2 11:29 编辑 ]

正是我急需的，非常感谢楼主！ :victory: :handshake :handshake :handshake :handshake :handshake